\n  border-radius:50%;\n  background:#9aa0a6;\n  border:none;\n  cursor:pointer;\n  pointer-events:auto;\n}\n\n.mp-filter-range{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#7a7f87;\n  margin-bottom:8px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinRange = root.querySelector(\'#mpSizeMinRange\');\n  const sizeMaxRange = root.querySelector(\'#mpSizeMaxRange\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinRange = root.querySelector(\'#mpDurationMinRange\');\n  const durationMaxRange = root.querySelector(\'#mpDurationMaxRange\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'.mp-btn-icon\');\n  const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n  function closeFilter(){\n    if (filterPop) filterPop.classList.remove(\'show\');\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      closeFilter();\n    }\n  });\n\n  cards.forEach(card => {\n    card.addEventListener(\'click\', function(){\n      if (card.classList.contains(\'mp-folder-card\')) return;\n      card.classList.toggle(\'is-selected\');\n      syncTopCheckboxes();\n    });\n  });\n\n  function setSelectedByType(type, selected){\n    cards.forEach(card => {\n      if (card.dataset.type === type && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function setAllSelected(selected){\n    cards.forEach(card => {\n      if (!card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function syncTopCheckboxes(){\n    const selectable = cards.filter(card => !card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  function sizeLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'11KB\';\n    if (value >= 5) return \'5MB\';\n    return value + \'MB\';\n  }\n\n  function durationLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'3秒\';\n    if (value >= 60) return \'不限\';\n    return value + \'秒\';\n  }\n\n  function updateRangeText(){\n    if (sizeMinRange && sizeMaxRange && sizeMinText && sizeMaxText) {\n      if (Number(sizeMinRange.value) > Number(sizeMaxRange.value)) {\n        sizeMinRange.value = sizeMaxRange.value;\n      }\n\n      sizeMinText.textContent = sizeLabel(sizeMinRange.value);\n      sizeMaxText.textContent = sizeLabel(sizeMaxRange.value);\n    }\n\n    if (durationMinRange && durationMaxRange && durationMinText && durationMaxText) {\n      if (Number(durationMinRange.value) > Number(durationMaxRange.value)) {\n        durationMinRange.value = durationMaxRange.value;\n      }\n\n      durationMinText.textContent = durationLabel(durationMinRange.value);\n      durationMaxText.textContent = durationLabel(durationMaxRange.value);\n    }\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    const minSize = sizeMinRange ? Number(sizeMinRange.value) : 0;\n    const maxSize = sizeMaxRange ? Number(sizeMaxRange.value) : 5;\n\n    const minDuration = durationMinRange ? Number(durationMinRange.value) : 0;\n    const maxDuration = durationMaxRange ? Number(durationMaxRange.value) : 60;\n\n    cards.forEach(card => {\n      const type = card.dataset.type;\n      const text = card.innerText.toLowerCase();\n      const size = Number(card.dataset.size || 0);\n      const duration = Number(card.dataset.duration || 0);\n\n      let visible = true;\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && type !== \'video\') visible = false;\n\n      if (type !== \'folder\' && (size < minSize || size > maxSize)) visible = false;\n\n      if (type === \'video\' && (duration < minDuration || duration > maxDuration)) visible = false;\n\n      card.style.display = visible ? \'\' : \'none\';\n\n      if (!visible) {\n        card.classList.remove(\'is-selected\');\n      }\n    });\n\n    syncTopCheckboxes();\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  [sizeMinRange, sizeMaxRange, durationMinRange, durationMaxRange].forEach(function(range){\n    if (range) {\n      range.addEventListener(\'input\', applyFilters);\n    }\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      if (sizeMinRange) sizeMinRange.value = 0;\n      if (sizeMaxRange) sizeMaxRange.value = 5;\n      if (durationMinRange) durationMinRange.value = 0;\n      if (durationMaxRange) durationMaxRange.value = 60;\n\n      cards.forEach(card => {\n        card.style.display = \'\';\n        card.classList.remove(\'is-selected\');\n      });\n\n      updateRangeText();\n      syncTopCheckboxes();\n    });\n  }\n\n  updateRangeText();\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-24 10:30:13','2026-04-24 10:30:13','',1356,'https://wp.momentry.ddns.net/?p=1377',0,'revision','',0),
(1379,6,'2026-04-27 10:01:02','2026-04-27 10:01:02','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依大小・由大到小</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 未加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 已加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <div class=\"mp-filter-title\">時間</div>\n      <div class=\"mp-filter-muted\">2023/11/29 ～ 2026/01/04</div>\n\n      <div class=\"mp-filter-title\">大小</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpSizeMinRange\" min=\"0\" max=\"5\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpSizeMaxRange\" min=\"0\" max=\"5\" value=\"5\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpSizeMinText\">11KB</span>\n        <span id=\"mpSizeMaxText\">5MB</span>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpDurationMinRange\" min=\"0\" max=\"60\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpDurationMaxRange\" min=\"0\" max=\"60\" value=\"60\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpDurationMinText\">3秒</span>\n        <span id=\"mpDurationMaxText\">不限</span>\n      </div>\n    </div>\n\n    <div class=\"mp-grid\">\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">風景圖片01 - 湖景與山景素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"4\" data-duration=\"25\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">iStock</div><div class=\"mp-name\">晨光草原 - 空拍片段素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"3\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">山脈與步道 - 旅遊風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"5\" data-duration=\"48\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Envato</div><div class=\"mp-name\">海邊木棧道 - 短影音片段</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"1\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Pexels</div><div class=\"mp-name\">夕陽天空 - 自然景色圖</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">LiveJapan</div><div class=\"mp-name\">森林光線 - 氣氛風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"3\" data-duration=\"12\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Storyblocks</div><div class=\"mp-name\">群山與白雲 - 動態自然素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"4\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">藍天湖景 - 檔案素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card mp-folder-card\" data-type=\"folder\" data-size=\"0\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap mp-folder\"><div class=\"mp-folder-shape\"></div></div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">資料夾</div><div class=\"mp-name\">新增資料夾</div></div>\n      </article>\n    </div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n/* 去掉篩選彈窗 radio / checkbox 點擊時的黑色外框 */\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-folder{\n  background:transparent;\n  border:none;\n}\n\n.mp-folder-shape{\n  width:100%;\n  height:100%;\n  border-radius:12px;\n  background:linear-gradient(180deg,#79cfff 0%, #63b7f4 100%);\n  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n.mp-filter-muted{\n  font-size:13px;\n  color:#666;\n  margin-bottom:8px;\n}\n\n.mp-range-control{\n  position:relative;\n  width:100%;\n  height:26px;\n  margin:8px 0 2px;\n}\n\n.mp-range-control::before{\n  content:\"\";\n  position:absolute;\n  left:0;\n  right:0;\n  top:12px;\n  height:4px;\n  border-radius:999px;\n  background:#d7dbe0;\n}\n\n.mp-range-control input[type=\"range\"]{\n  position:absolute;\n  left:0;\n  top:0;\n  width:100%;\n  height:26px;\n  margin:0;\n  background:transparent;\n  pointer-events:none;\n  appearance:none;\n  -webkit-appearance:none;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-runnable-track{\n  height:4px;\n  background:transparent;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:16px;\n  height:16px;\n  border-radius:50%;\n  background:#9aa0a6;\n  cursor:pointer;\n  pointer-events:auto;\n  margin-top:-6px;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-track{\n  height:4px;\n  background:transparent;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-thumb{\n  width:16px;\n  height:16px;\n  border-radius:50%;\n  background:#9aa0a6;\n  border:none;\n  cursor:pointer;\n  pointer-events:auto;\n}\n\n.mp-filter-range{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#7a7f87;\n  margin-bottom:8px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinRange = root.querySelector(\'#mpSizeMinRange\');\n  const sizeMaxRange = root.querySelector(\'#mpSizeMaxRange\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinRange = root.querySelector(\'#mpDurationMinRange\');\n  const durationMaxRange = root.querySelector(\'#mpDurationMaxRange\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'.mp-btn-icon\');\n  const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n  function closeFilter(){\n    if (filterPop) filterPop.classList.remove(\'show\');\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      closeFilter();\n    }\n  });\n\n  cards.forEach(card => {\n    card.addEventListener(\'click\', function(){\n      if (card.classList.contains(\'mp-folder-card\')) return;\n      card.classList.toggle(\'is-selected\');\n      syncTopCheckboxes();\n    });\n  });\n\n  function setSelectedByType(type, selected){\n    cards.forEach(card => {\n      if (card.dataset.type === type && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function setAllSelected(selected){\n    cards.forEach(card => {\n      if (!card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function syncTopCheckboxes(){\n    const selectable = cards.filter(card => !card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  function sizeLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'11KB\';\n    if (value >= 5) return \'5MB\';\n    return value + \'MB\';\n  }\n\n  function durationLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'3秒\';\n    if (value >= 60) return \'不限\';\n    return value + \'秒\';\n  }\n\n  function updateRangeText(){\n    if (sizeMinRange && sizeMaxRange && sizeMinText && sizeMaxText) {\n      if (Number(sizeMinRange.value) > Number(sizeMaxRange.value)) {\n        sizeMinRange.value = sizeMaxRange.value;\n      }\n\n      sizeMinText.textContent = sizeLabel(sizeMinRange.value);\n      sizeMaxText.textContent = sizeLabel(sizeMaxRange.value);\n    }\n\n    if (durationMinRange && durationMaxRange && durationMinText && durationMaxText) {\n      if (Number(durationMinRange.value) > Number(durationMaxRange.value)) {\n        durationMinRange.value = durationMaxRange.value;\n      }\n\n      durationMinText.textContent = durationLabel(durationMinRange.value);\n      durationMaxText.textContent = durationLabel(durationMaxRange.value);\n    }\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    const minSize = sizeMinRange ? Number(sizeMinRange.value) : 0;\n    const maxSize = sizeMaxRange ? Number(sizeMaxRange.value) : 5;\n\n    const minDuration = durationMinRange ? Number(durationMinRange.value) : 0;\n    const maxDuration = durationMaxRange ? Number(durationMaxRange.value) : 60;\n\n    cards.forEach(card => {\n      const type = card.dataset.type;\n      const text = card.innerText.toLowerCase();\n      const size = Number(card.dataset.size || 0);\n      const duration = Number(card.dataset.duration || 0);\n\n      let visible = true;\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && type !== \'video\') visible = false;\n\n      if (type !== \'folder\' && (size < minSize || size > maxSize)) visible = false;\n\n      if (type === \'video\' && (duration < minDuration || duration > maxDuration)) visible = false;\n\n      card.style.display = visible ? \'\' : \'none\';\n\n      if (!visible) {\n        card.classList.remove(\'is-selected\');\n      }\n    });\n\n    syncTopCheckboxes();\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  [sizeMinRange, sizeMaxRange, durationMinRange, durationMaxRange].forEach(function(range){\n    if (range) {\n      range.addEventListener(\'input\', applyFilters);\n    }\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      if (sizeMinRange) sizeMinRange.value = 0;\n      if (sizeMaxRange) sizeMaxRange.value = 5;\n      if (durationMinRange) durationMinRange.value = 0;\n      if (durationMaxRange) durationMaxRange.value = 60;\n\n      cards.forEach(card => {\n        card.style.display = \'\';\n        card.classList.remove(\'is-selected\');\n      });\n\n      updateRangeText();\n      syncTopCheckboxes();\n    });\n  }\n\n  updateRangeText();\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-27 10:01:02','2026-04-27 10:01:02','',1356,'https://wp.momentry.ddns.net/?p=1379',0,'revision','',0),
(1380,6,'2026-04-27 10:11:42','2026-04-27 10:11:42','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依大小・由大到小</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 未加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 已加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <div class=\"mp-filter-title\">時間</div>\n      <div class=\"mp-filter-muted\">2023/11/29 ～ 2026/01/04</div>\n\n      <div class=\"mp-filter-title\">大小</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpSizeMinRange\" min=\"0\" max=\"5\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpSizeMaxRange\" min=\"0\" max=\"5\" value=\"5\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpSizeMinText\">11KB</span>\n        <span id=\"mpSizeMaxText\">5MB</span>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpDurationMinRange\" min=\"0\" max=\"60\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpDurationMaxRange\" min=\"0\" max=\"60\" value=\"60\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpDurationMinText\">3秒</span>\n        <span id=\"mpDurationMaxText\">不限</span>\n      </div>\n    </div>\n\n    <div class=\"mp-grid\">\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">風景圖片01 - 湖景與山景素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"4\" data-duration=\"25\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">iStock</div><div class=\"mp-name\">晨光草原 - 空拍片段素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"3\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">山脈與步道 - 旅遊風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"5\" data-duration=\"48\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Envato</div><div class=\"mp-name\">海邊木棧道 - 短影音片段</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"1\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Pexels</div><div class=\"mp-name\">夕陽天空 - 自然景色圖</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">LiveJapan</div><div class=\"mp-name\">森林光線 - 氣氛風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"3\" data-duration=\"12\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Storyblocks</div><div class=\"mp-name\">群山與白雲 - 動態自然素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"4\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">藍天湖景 - 檔案素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card mp-folder-card\" data-type=\"folder\" data-size=\"0\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap mp-folder\"><div class=\"mp-folder-shape\"></div></div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">資料夾</div><div class=\"mp-name\">新增資料夾</div></div>\n      </article>\n    </div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n/* 去掉篩選彈窗 radio / checkbox 點擊時的黑色外框 */\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-folder{\n  background:transparent;\n  border:none;\n}\n\n.mp-folder-shape{\n  width:100%;\n  height:100%;\n  border-radius:12px;\n  background:linear-gradient(180deg,#79cfff 0%, #63b7f4 100%);\n  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n.mp-filter-muted{\n  font-size:13px;\n  color:#666;\n  margin-bottom:8px;\n}\n\n.mp-range-control{\n  position:relative;\n  width:100%;\n  height:18px;\n  margin:6px 0 0;\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control:focus,\n.mp-range-control:active,\n.mp-range-control:focus-within,\n.mp-range-control:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control::before{\n  content:\"\";\n  position:absolute;\n  left:0;\n  right:0;\n  top:8px;\n  height:3px;\n  border-radius:999px;\n  background:#d7dbe0;\n}\n\n.mp-range-control input[type=\"range\"]{\n  position:absolute;\n  left:0;\n  top:0;\n  width:100%;\n  height:18px;\n  margin:0;\n  background:transparent;\n  pointer-events:none;\n  appearance:none;\n  -webkit-appearance:none;\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]:focus,\n.mp-range-control input[type=\"range\"]:active,\n.mp-range-control input[type=\"range\"]:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-runnable-track{\n  height:3px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:14px;\n  height:14px;\n  border-radius:50%;\n  background:#9aa0a6;\n  cursor:pointer;\n  pointer-events:auto;\n  margin-top:-5.5px;\n  border:none;\n  box-shadow:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-track{\n  height:3px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-thumb{\n  width:14px;\n  height:14px;\n  border-radius:50%;\n  background:#9aa0a6;\n  border:none;\n  cursor:pointer;\n  pointer-events:auto;\n  box-shadow:none;\n}\n\n.mp-filter-range{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#7a7f87;\n  margin-bottom:8px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinRange = root.querySelector(\'#mpSizeMinRange\');\n  const sizeMaxRange = root.querySelector(\'#mpSizeMaxRange\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinRange = root.querySelector(\'#mpDurationMinRange\');\n  const durationMaxRange = root.querySelector(\'#mpDurationMaxRange\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'.mp-btn-icon\');\n  const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n  function closeFilter(){\n    if (filterPop) filterPop.classList.remove(\'show\');\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      closeFilter();\n    }\n  });\n\n  cards.forEach(card => {\n    card.addEventListener(\'click\', function(){\n      if (card.classList.contains(\'mp-folder-card\')) return;\n      card.classList.toggle(\'is-selected\');\n      syncTopCheckboxes();\n    });\n  });\n\n  function setSelectedByType(type, selected){\n    cards.forEach(card => {\n      if (card.dataset.type === type && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function setAllSelected(selected){\n    cards.forEach(card => {\n      if (!card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function syncTopCheckboxes(){\n    const selectable = cards.filter(card => !card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  function sizeLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'11KB\';\n    if (value >= 5) return \'5MB\';\n    return value + \'MB\';\n  }\n\n  function durationLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'3秒\';\n    if (value >= 60) return \'不限\';\n    return value + \'秒\';\n  }\n\n  function updateRangeText(){\n    if (sizeMinRange && sizeMaxRange && sizeMinText && sizeMaxText) {\n      if (Number(sizeMinRange.value) > Number(sizeMaxRange.value)) {\n        sizeMinRange.value = sizeMaxRange.value;\n      }\n\n      sizeMinText.textContent = sizeLabel(sizeMinRange.value);\n      sizeMaxText.textContent = sizeLabel(sizeMaxRange.value);\n    }\n\n    if (durationMinRange && durationMaxRange && durationMinText && durationMaxText) {\n      if (Number(durationMinRange.value) > Number(durationMaxRange.value)) {\n        durationMinRange.value = durationMaxRange.value;\n      }\n\n      durationMinText.textContent = durationLabel(durationMinRange.value);\n      durationMaxText.textContent = durationLabel(durationMaxRange.value);\n    }\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    const minSize = sizeMinRange ? Number(sizeMinRange.value) : 0;\n    const maxSize = sizeMaxRange ? Number(sizeMaxRange.value) : 5;\n\n    const minDuration = durationMinRange ? Number(durationMinRange.value) : 0;\n    const maxDuration = durationMaxRange ? Number(durationMaxRange.value) : 60;\n\n    cards.forEach(card => {\n      const type = card.dataset.type;\n      const text = card.innerText.toLowerCase();\n      const size = Number(card.dataset.size || 0);\n      const duration = Number(card.dataset.duration || 0);\n\n      let visible = true;\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && type !== \'video\') visible = false;\n\n      if (type !== \'folder\' && (size < minSize || size > maxSize)) visible = false;\n\n      if (type === \'video\' && (duration < minDuration || duration > maxDuration)) visible = false;\n\n      card.style.display = visible ? \'\' : \'none\';\n\n      if (!visible) {\n        card.classList.remove(\'is-selected\');\n      }\n    });\n\n    syncTopCheckboxes();\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  [sizeMinRange, sizeMaxRange, durationMinRange, durationMaxRange].forEach(function(range){\n    if (range) {\n      range.addEventListener(\'input\', applyFilters);\n    }\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      if (sizeMinRange) sizeMinRange.value = 0;\n      if (sizeMaxRange) sizeMaxRange.value = 5;\n      if (durationMinRange) durationMinRange.value = 0;\n      if (durationMaxRange) durationMaxRange.value = 60;\n\n      cards.forEach(card => {\n        card.style.display = \'\';\n        card.classList.remove(\'is-selected\');\n      });\n\n      updateRangeText();\n      syncTopCheckboxes();\n    });\n  }\n\n  updateRangeText();\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-27 10:11:42','2026-04-27 10:11:42','',1356,'https://wp.momentry.ddns.net/?p=1380',0,'revision','',0),
(1381,6,'2026-04-27 10:15:54','2026-04-27 10:15:54','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依大小・由大到小</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 未加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\"> 已加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <div class=\"mp-filter-title\">時間</div>\n      <div class=\"mp-filter-muted\">2023/11/29 ～ 2026/01/04</div>\n\n      <div class=\"mp-filter-title\">大小</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpSizeMinRange\" min=\"0\" max=\"5\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpSizeMaxRange\" min=\"0\" max=\"5\" value=\"5\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpSizeMinText\">11KB</span>\n        <span id=\"mpSizeMaxText\">5MB</span>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpDurationMinRange\" min=\"0\" max=\"60\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpDurationMaxRange\" min=\"0\" max=\"60\" value=\"60\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpDurationMinText\">3秒</span>\n        <span id=\"mpDurationMaxText\">不限</span>\n      </div>\n    </div>\n\n    <div class=\"mp-grid\">\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">風景圖片01 - 湖景與山景素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"4\" data-duration=\"25\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">iStock</div><div class=\"mp-name\">晨光草原 - 空拍片段素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"3\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">山脈與步道 - 旅遊風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"5\" data-duration=\"48\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Envato</div><div class=\"mp-name\">海邊木棧道 - 短影音片段</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"1\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Pexels</div><div class=\"mp-name\">夕陽天空 - 自然景色圖</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"2\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">LiveJapan</div><div class=\"mp-name\">森林光線 - 氣氛風景圖片</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"video\" data-size=\"3\" data-duration=\"12\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">VIDEO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Storyblocks</div><div class=\"mp-name\">群山與白雲 - 動態自然素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card\" data-type=\"photo\" data-size=\"4\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap\">\n          <img src=\"https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=1200&auto=format&fit=crop\">\n          <span class=\"mp-badge-type\">PHOTO</span><span class=\"mp-checkmark\">✓</span>\n        </div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">Freepik</div><div class=\"mp-name\">藍天湖景 - 檔案素材</div></div>\n      </article>\n\n      <article class=\"mp-file-card mp-folder-card\" data-type=\"folder\" data-size=\"0\" data-duration=\"0\">\n        <div class=\"mp-thumb-wrap mp-folder\"><div class=\"mp-folder-shape\"></div></div>\n        <div class=\"mp-meta\"><div class=\"mp-source\">資料夾</div><div class=\"mp-name\">新增資料夾</div></div>\n      </article>\n    </div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n/* 去掉篩選彈窗 radio / checkbox 點擊時的黑色外框 */\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-folder{\n  background:transparent;\n  border:none;\n}\n\n.mp-folder-shape{\n  width:100%;\n  height:100%;\n  border-radius:12px;\n  background:linear-gradient(180deg,#79cfff 0%, #63b7f4 100%);\n  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n.mp-filter-muted{\n  font-size:13px;\n  color:#666;\n  margin-bottom:8px;\n}\n\n.mp-range-control{\n  position:relative;\n  width:100%;\n  height:18px;\n  margin:6px 0 0;\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control:focus,\n.mp-range-control:active,\n.mp-range-control:focus-within,\n.mp-range-control:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control::before{\n  content:\"\";\n  position:absolute;\n  left:0;\n  right:0;\n  top:8px;\n  height:3px;\n  border-radius:999px;\n  background:#d7dbe0;\n}\n\n.mp-range-control input[type=\"range\"]{\n  position:absolute;\n  left:0;\n  top:0;\n  width:100%;\n  height:18px;\n  margin:0;\n  background:transparent;\n  pointer-events:none;\n  appearance:none;\n  -webkit-appearance:none;\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]:focus,\n.mp-range-control input[type=\"range\"]:active,\n.mp-range-control input[type=\"range\"]:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-runnable-track{\n  height:2px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:10px;\n  height:10px;\n  border-radius:50%;\n  background:#9aa0a6;\n  cursor:pointer;\n  pointer-events:auto;\n  margin-top:-5.5px;\n  border:none;\n  box-shadow:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-track{\n  height:3px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-thumb{\n  width:14px;\n  height:14px;\n  border-radius:50%;\n  background:#9aa0a6;\n  border:none;\n  cursor:pointer;\n  pointer-events:auto;\n  box-shadow:none;\n}\n\n.mp-filter-range{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#7a7f87;\n  margin-bottom:8px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinRange = root.querySelector(\'#mpSizeMinRange\');\n  const sizeMaxRange = root.querySelector(\'#mpSizeMaxRange\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinRange = root.querySelector(\'#mpDurationMinRange\');\n  const durationMaxRange = root.querySelector(\'#mpDurationMaxRange\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'.mp-btn-icon\');\n  const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n  function closeFilter(){\n    if (filterPop) filterPop.classList.remove(\'show\');\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      closeFilter();\n    }\n  });\n\n  cards.forEach(card => {\n    card.addEventListener(\'click\', function(){\n      if (card.classList.contains(\'mp-folder-card\')) return;\n      card.classList.toggle(\'is-selected\');\n      syncTopCheckboxes();\n    });\n  });\n\n  function setSelectedByType(type, selected){\n    cards.forEach(card => {\n      if (card.dataset.type === type && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function setAllSelected(selected){\n    cards.forEach(card => {\n      if (!card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function syncTopCheckboxes(){\n    const selectable = cards.filter(card => !card.classList.contains(\'mp-folder-card\') && card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  function sizeLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'11KB\';\n    if (value >= 5) return \'5MB\';\n    return value + \'MB\';\n  }\n\n  function durationLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'3秒\';\n    if (value >= 60) return \'不限\';\n    return value + \'秒\';\n  }\n\n  function updateRangeText(){\n    if (sizeMinRange && sizeMaxRange && sizeMinText && sizeMaxText) {\n      if (Number(sizeMinRange.value) > Number(sizeMaxRange.value)) {\n        sizeMinRange.value = sizeMaxRange.value;\n      }\n\n      sizeMinText.textContent = sizeLabel(sizeMinRange.value);\n      sizeMaxText.textContent = sizeLabel(sizeMaxRange.value);\n    }\n\n    if (durationMinRange && durationMaxRange && durationMinText && durationMaxText) {\n      if (Number(durationMinRange.value) > Number(durationMaxRange.value)) {\n        durationMinRange.value = durationMaxRange.value;\n      }\n\n      durationMinText.textContent = durationLabel(durationMinRange.value);\n      durationMaxText.textContent = durationLabel(durationMaxRange.value);\n    }\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    const minSize = sizeMinRange ? Number(sizeMinRange.value) : 0;\n    const maxSize = sizeMaxRange ? Number(sizeMaxRange.value) : 5;\n\n    const minDuration = durationMinRange ? Number(durationMinRange.value) : 0;\n    const maxDuration = durationMaxRange ? Number(durationMaxRange.value) : 60;\n\n    cards.forEach(card => {\n      const type = card.dataset.type;\n      const text = card.innerText.toLowerCase();\n      const size = Number(card.dataset.size || 0);\n      const duration = Number(card.dataset.duration || 0);\n\n      let visible = true;\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && type !== \'video\') visible = false;\n\n      if (type !== \'folder\' && (size < minSize || size > maxSize)) visible = false;\n\n      if (type === \'video\' && (duration < minDuration || duration > maxDuration)) visible = false;\n\n      card.style.display = visible ? \'\' : \'none\';\n\n      if (!visible) {\n        card.classList.remove(\'is-selected\');\n      }\n    });\n\n    syncTopCheckboxes();\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  [sizeMinRange, sizeMaxRange, durationMinRange, durationMaxRange].forEach(function(range){\n    if (range) {\n      range.addEventListener(\'input\', applyFilters);\n    }\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      if (sizeMinRange) sizeMinRange.value = 0;\n      if (sizeMaxRange) sizeMaxRange.value = 5;\n      if (durationMinRange) durationMinRange.value = 0;\n      if (durationMaxRange) durationMaxRange.value = 60;\n\n      cards.forEach(card => {\n        card.style.display = \'\';\n        card.classList.remove(\'is-selected\');\n      });\n\n      updateRangeText();\n      syncTopCheckboxes();\n    });\n  }\n\n  updateRangeText();\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-27 10:15:54','2026-04-27 10:15:54','',1356,'https://wp.momentry.ddns.net/?p=1381',0,'revision','',0),
(1382,6,'2026-04-28 06:30:00','2026-04-28 06:30:00','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"size_desc\"> 依大小・由大到小</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpNotInSet\"> 未加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpInSet\"> 已加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <div class=\"mp-filter-title\">時間</div>\n      <div class=\"mp-filter-muted\">2023/11/29 ～ 2026/01/04</div>\n\n      <div class=\"mp-filter-title\">大小</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpSizeMinRange\" min=\"0\" max=\"5\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpSizeMaxRange\" min=\"0\" max=\"5\" value=\"5\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpSizeMinText\">11KB</span>\n        <span id=\"mpSizeMaxText\">5MB</span>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n      <div class=\"mp-range-control\">\n        <input type=\"range\" id=\"mpDurationMinRange\" min=\"0\" max=\"60\" value=\"0\" step=\"1\">\n        <input type=\"range\" id=\"mpDurationMaxRange\" min=\"0\" max=\"60\" value=\"60\" step=\"1\">\n      </div>\n      <div class=\"mp-filter-range\">\n        <span id=\"mpDurationMinText\">3秒</span>\n        <span id=\"mpDurationMaxText\">不限</span>\n      </div>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\">載入底層資料中...</div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-card-actions{\n  display:flex;\n  justify-content:flex-start;\n  margin-top:6px;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n  word-break:break-word;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-folder{\n  background:transparent;\n  border:none;\n}\n\n.mp-folder-shape{\n  width:100%;\n  height:100%;\n  border-radius:12px;\n  background:linear-gradient(180deg,#79cfff 0%, #63b7f4 100%);\n  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n.mp-filter-muted{\n  font-size:13px;\n  color:#666;\n  margin-bottom:8px;\n}\n\n.mp-range-control{\n  position:relative;\n  width:100%;\n  height:18px;\n  margin:6px 0 0;\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control:focus,\n.mp-range-control:active,\n.mp-range-control:focus-within,\n.mp-range-control:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-range-control::before{\n  content:\"\";\n  position:absolute;\n  left:0;\n  right:0;\n  top:8px;\n  height:3px;\n  border-radius:999px;\n  background:#d7dbe0;\n}\n\n.mp-range-control input[type=\"range\"]{\n  position:absolute;\n  left:0;\n  top:0;\n  width:100%;\n  height:18px;\n  margin:0;\n  background:transparent;\n  pointer-events:none;\n  appearance:none;\n  -webkit-appearance:none;\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]:focus,\n.mp-range-control input[type=\"range\"]:active,\n.mp-range-control input[type=\"range\"]:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border:none !important;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-runnable-track{\n  height:2px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:10px;\n  height:10px;\n  border-radius:50%;\n  background:#9aa0a6;\n  cursor:pointer;\n  pointer-events:auto;\n  margin-top:-5.5px;\n  border:none;\n  box-shadow:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-track{\n  height:3px;\n  background:transparent;\n  border:none;\n}\n\n.mp-range-control input[type=\"range\"]::-moz-range-thumb{\n  width:14px;\n  height:14px;\n  border-radius:50%;\n  background:#9aa0a6;\n  border:none;\n  cursor:pointer;\n  pointer-events:auto;\n  box-shadow:none;\n}\n\n.mp-filter-range{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#7a7f87;\n  margin-bottom:8px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  /* ✅ N8N / 底層資料連結 */\n  const FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\n  const SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\n  const EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\n  const THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const notInSet = root.querySelector(\'#mpNotInSet\');\n  const inSet = root.querySelector(\'#mpInSet\');\n\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinRange = root.querySelector(\'#mpSizeMinRange\');\n  const sizeMaxRange = root.querySelector(\'#mpSizeMaxRange\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinRange = root.querySelector(\'#mpDurationMinRange\');\n  const durationMaxRange = root.querySelector(\'#mpDurationMaxRange\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n  let currentItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function closeFilter(){\n    if (filterPop) filterPop.classList.remove(\'show\');\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      closeFilter();\n    }\n  });\n\n  function safeText(value, fallback){\n    if (value === null || value === undefined || value === \'\') return fallback || \'\';\n    return String(value);\n  }\n\n  function normalizeUrl(url){\n    if (!url) return \'\';\n    url = String(url);\n\n    if (url.startsWith(\'http://\') || url.startsWith(\'https://\')) return url;\n\n    return THUMB_BASE.replace(/\\/$/, \'\') + \'/\' + url.replace(/^\\//, \'\');\n  }\n\n  function guessType(item){\n    const raw = String(\n      item.type || item.file_type || item.media_type || item.kind || item.mime || \'\'\n    ).toLowerCase();\n\n    const name = String(\n      item.name || item.filename || item.file_name || item.title || item.path || \'\'\n    ).toLowerCase();\n\n    if (raw.includes(\'video\') || /\\.(mp4|mov|avi|mkv|webm)$/i.test(name)) return \'video\';\n    if (raw.includes(\'image\') || raw.includes(\'photo\') || /\\.(jpg|jpeg|png|gif|webp)$/i.test(name)) return \'photo\';\n    if (raw.includes(\'folder\')) return \'folder\';\n\n    return \'photo\';\n  }\n\n  function normalizePeople(item){\n    const people =\n      item.people ||\n      item.persons ||\n      item.characters ||\n      item.identities ||\n      item.faces ||\n      item.cast ||\n      item.actors ||\n      [];\n\n    if (Array.isArray(people)) {\n      return people.map(p => {\n        if (typeof p === \'string\') return p;\n        return p.name || p.person_name || p.character || p.label || p.actor || \'\';\n      }).filter(Boolean);\n    }\n\n    if (typeof people === \'string\') {\n      return people.split(\',\').map(p => p.trim()).filter(Boolean);\n    }\n\n    return [];\n  }\n\n  function normalizeItem(item, index){\n    const type = guessType(item);\n\n    const name = safeText(\n      item.name ||\n      item.filename ||\n      item.file_name ||\n      item.title ||\n      item.movie_title ||\n      item.asset_name,\n      \'未命名檔案\'\n    );\n\n    const source = safeText(\n      item.source ||\n      item.library ||\n      item.path ||\n      item.folder ||\n      item.movie ||\n      item.collection,\n      \'底層資料\'\n    );\n\n    const thumb =\n      normalizeUrl(\n        item.thumb ||\n        item.thumbnail ||\n        item.thumbnail_url ||\n        item.image ||\n        item.image_url ||\n        item.poster ||\n        item.poster_url ||\n        item.preview ||\n        item.preview_url\n      ) || \'https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1200&auto=format&fit=crop\';\n\n    const id = safeText(\n      item.id ||\n      item.asset_id ||\n      item.file_id ||\n      item.uuid ||\n      item.document_id ||\n      index,\n      index\n    );\n\n    return {\n      raw: item,\n      id,\n      type,\n      name,\n      source,\n      thumb,\n      size: Number(item.size_level || item.size || item.file_size_level || 2) || 2,\n      duration: Number(item.duration || item.duration_sec || item.video_duration || 0) || 0,\n      createdAt: item.created_at || item.createdAt || item.time || \'\',\n      inSet: Boolean(item.in_set || item.in_identification_set || item.added_to_people),\n      people: normalizePeople(item),\n      movie: item.movie || item.movie_title || item.film || \'\',\n      description: item.description || item.summary || item.text || item.caption || \'\',\n      path: item.path || item.file_path || item.url || item.asset_url || \'\'\n    };\n  }\n\n  function extractItemsFromResponse(data){\n    if (Array.isArray(data)) return data;\n\n    if (data && Array.isArray(data.items)) return data.items;\n    if (data && Array.isArray(data.results)) return data.results;\n    if (data && Array.isArray(data.data)) return data.data;\n    if (data && data.data && Array.isArray(data.data.items)) return data.data.items;\n    if (data && data.data && Array.isArray(data.data.results)) return data.data.results;\n\n    return [];\n  }\n\n  async function fetchItems(keyword){\n    showStatus(\'載入底層資料中...\');\n\n    try {\n      const res = await fetch(SEARCH_ENDPOINT, {\n        method: \'POST\',\n        headers: {\n          \'Content-Type\': \'application/json\'\n        },\n        body: JSON.stringify({\n          query: keyword || \'\',\n          mode: \'people_files\',\n          page: \'people-files\'\n        })\n      });\n\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      const data = await res.json();\n      const rawItems = extractItemsFromResponse(data);\n\n      if (!rawItems.length) {\n        allItems = getDemoItems();\n        showStatus(\'目前 N8N 沒有回傳資料，先顯示示範資料。\');\n      } else {\n        allItems = rawItems.map(normalizeItem);\n        showStatus(\'\');\n      }\n\n      applyFilters();\n\n    } catch (err) {\n      console.warn(\'N8N search failed:\', err);\n      allItems = getDemoItems();\n      showStatus(\'N8N 暫時連線失敗，先顯示示範資料。\');\n      applyFilters();\n    }\n  }\n\n  function getDemoItems(){\n    return [\n      normalizeItem({\n        id:\'demo-1\',\n        type:\'photo\',\n        name:\'電影人物 - 女主角海報\',\n        source:\'Movie Database\',\n        image:\'https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1200&auto=format&fit=crop\',\n        people:[\'Luna Chen\',\'女主角\'],\n        movie:\'Demo Movie A\',\n        description:\'示範底層人物資料。\'\n      }, 1),\n      normalizeItem({\n        id:\'demo-2\',\n        type:\'video\',\n        name:\'電影片段 - 男主角出場\',\n        source:\'Film Archive\',\n        image:\'https://images.unsplash.com/photo-1440404653325-ab127d49abc1?q=80&w=1200&auto=format&fit=crop\',\n        duration:25,\n        people:[\'Kai Wang\',\'男主角\'],\n        movie:\'Demo Movie B\',\n        description:\'示範影片人物資料。\'\n      }, 2),\n      normalizeItem({\n        id:\'demo-3\',\n        type:\'photo\',\n        name:\'電影人物 - 配角劇照\',\n        source:\'Production Still\',\n        image:\'https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?q=80&w=1200&auto=format&fit=crop\',\n        people:[\'Mia Lin\',\'配角\'],\n        movie:\'Demo Movie C\'\n      }, 3),\n      normalizeItem({\n        id:\'demo-4\',\n        type:\'video\',\n        name:\'電影場景 - 群像片段\',\n        source:\'Scene Clip\',\n        image:\'https://images.unsplash.com/photo-1478720568477-152d9b164e26?q=80&w=1200&auto=format&fit=crop\',\n        duration:48,\n        people:[\'Luna Chen\',\'Kai Wang\',\'Mia Lin\'],\n        movie:\'Demo Movie D\'\n      }, 4)\n    ];\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function renderItems(items){\n    currentItems = items;\n\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    grid.innerHTML = items.map(item => {\n      const peopleHtml = item.people && item.people.length\n        ? `<div class=\"mp-people\">${item.people.slice(0, 3).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}</div>`\n        : \'\';\n\n      const detailPeople = item.people && item.people.length ? item.people.join(\'、\') : \'無\';\n      const detailMovie = item.movie || \'無\';\n      const detailDesc = item.description || \'無\';\n      const detailPath = item.path || \'無\';\n\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-size=\"${escapeHtml(item.size)}\"\n          data-duration=\"${escapeHtml(item.duration)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\"\n          data-in-set=\"${item.inSet ? \'1\' : \'0\'}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${escapeHtml(item.type.toUpperCase())}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n            ${peopleHtml}\n            <div class=\"mp-card-actions\">\n              <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n            </div>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">底層資料</div>\n              <div class=\"mp-detail-row\">檔案 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(detailMovie)}</div>\n              <div class=\"mp-detail-row\">人物：${escapeHtml(detailPeople)}</div>\n              <div class=\"mp-detail-row\">來源：${escapeHtml(item.source)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(detailDesc)}</div>\n              <div class=\"mp-detail-row\">路徑：${escapeHtml(detailPath)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function getItemByCard(card){\n    const id = card.dataset.id;\n    return currentItems.find(item => String(item.id) === String(id));\n  }\n\n  function toggleDetail(card){\n    const item = getItemByCard(card);\n    if (!item) return;\n\n    sendEvent(\'click\', item);\n    card.classList.toggle(\'show-detail\');\n\n    console.log(\'底層資料：\', item.raw || item);\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          toggleDetail(card);\n        });\n      }\n    });\n  }\n\n  function sendEvent(eventType, item){\n    fetch(EVENT_ENDPOINT, {\n      method:\'POST\',\n      headers:{\'Content-Type\':\'application/json\'},\n      body:JSON.stringify({\n        event_type:eventType,\n        page:\'people-files\',\n        asset_id:item.id,\n        asset_name:item.name,\n        asset_type:item.type,\n        people:item.people || [],\n        timestamp:new Date().toISOString()\n      })\n    }).catch(function(err){\n      console.warn(\'event failed:\', err);\n    });\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type && card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.style.display !== \'none\') {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  function sizeLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'11KB\';\n    if (value >= 5) return \'5MB\';\n    return value + \'MB\';\n  }\n\n  function durationLabel(value){\n    value = Number(value);\n    if (value <= 0) return \'3秒\';\n    if (value >= 60) return \'不限\';\n    return value + \'秒\';\n  }\n\n  function updateRangeText(){\n    if (sizeMinRange && sizeMaxRange && sizeMinText && sizeMaxText) {\n      if (Number(sizeMinRange.value) > Number(sizeMaxRange.value)) {\n        sizeMinRange.value = sizeMaxRange.value;\n      }\n\n      sizeMinText.textContent = sizeLabel(sizeMinRange.value);\n      sizeMaxText.textContent = sizeLabel(sizeMaxRange.value);\n    }\n\n    if (durationMinRange && durationMaxRange && durationMinText && durationMaxText) {\n      if (Number(durationMinRange.value) > Number(durationMaxRange.value)) {\n        durationMinRange.value = durationMaxRange.value;\n      }\n\n      durationMinText.textContent = durationLabel(durationMinRange.value);\n      durationMaxText.textContent = durationLabel(durationMaxRange.value);\n    }\n  }\n\n  function getSortValue(){\n    const checked = root.querySelector(\'input[name=\"mp-sort\"]:checked\');\n    return checked ? checked.value : \'time_desc\';\n  }\n\n  function sortItems(items){\n    const sort = getSortValue();\n\n    return items.slice().sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'size_desc\') return Number(b.size) - Number(a.size);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    const minSize = sizeMinRange ? Number(sizeMinRange.value) : 0;\n    const maxSize = sizeMaxRange ? Number(sizeMaxRange.value) : 5;\n\n    const minDuration = durationMinRange ? Number(durationMinRange.value) : 0;\n    const maxDuration = durationMaxRange ? Number(durationMaxRange.value) : 60;\n\n    let filtered = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.type,\n        item.movie,\n        item.description,\n        item.path,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      if (notInSet && inSet && notInSet.checked && inSet.checked) {\n      } else {\n        if (notInSet && notInSet.checked && item.inSet) visible = false;\n        if (inSet && inSet.checked && !item.inSet) visible = false;\n      }\n\n      if (item.type !== \'folder\' && (item.size < minSize || item.size > maxSize)) visible = false;\n\n      if (item.type === \'video\' && (item.duration < minDuration || item.duration > maxDuration)) visible = false;\n\n      return visible;\n    });\n\n    filtered = sortItems(filtered);\n    renderItems(filtered);\n  }\n\n  let searchTimer = null;\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function(){\n      clearTimeout(searchTimer);\n      searchTimer = setTimeout(function(){\n        applyFilters();\n      }, 200);\n    });\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  [notInSet, inSet].forEach(function(el){\n    if (el) el.addEventListener(\'change\', applyFilters);\n  });\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  [sizeMinRange, sizeMaxRange, durationMinRange, durationMaxRange].forEach(function(range){\n    if (range) {\n      range.addEventListener(\'input\', applyFilters);\n    }\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n      if (notInSet) notInSet.checked = false;\n      if (inSet) inSet.checked = false;\n\n      if (sizeMinRange) sizeMinRange.value = 0;\n      if (sizeMaxRange) sizeMaxRange.value = 5;\n      if (durationMinRange) durationMinRange.value = 0;\n      if (durationMaxRange) durationMaxRange.value = 60;\n\n      fetchItems(\'\');\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n      const selectedItems = selectedCards.map(getItemByCard).filter(Boolean);\n\n      if (!selectedItems.length) {\n        alert(\'請先選擇要加入識別集的檔案\');\n        return;\n      }\n\n      selectedItems.forEach(item => sendEvent(\'add_to_people_set\', item));\n      alert(\'已加入識別集：\' + selectedItems.length + \' 筆\');\n    });\n  }\n\n  updateRangeText();\n  fetchItems(\'\');\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-28 06:30:00','2026-04-28 06:30:00','',1356,'https://wp.momentry.ddns.net/?p=1382',0,'revision','',0),
(1384,6,'2026-04-28 06:44:02','2026-04-28 06:44:02','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理','','inherit','closed','closed','','1356-revision-v1','','','2026-04-28 06:44:02','2026-04-28 06:44:02','',1356,'https://wp.momentry.ddns.net/?p=1384',0,'revision','',0),
(1386,1,'2026-04-28 07:29:14','2026-04-28 07:29:14','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Search Lab 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Search Lab</h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Search Lab','','inherit','closed','closed','','1035-revision-v1','','','2026-04-28 07:29:14','2026-04-28 07:29:14','',1035,'https://wp.momentry.ddns.net/?p=1386',0,'revision','',0),
(1388,4,'2026-04-28 14:12:27','2026-04-28 14:12:27','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <div class=\"ms-ppl-spinner\"></div>\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:20px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Spinner / progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner {\n  width: 14px; height: 14px; border-radius: 50%;\n  border: 2px solid #e0e0e0;\n  border-top-color: #1967d2;\n  animation: msPplSpin .8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes msPplSpin { to { transform: rotate(360deg); } }\n\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n  animation: msPplPulse 1.5s ease-in-out infinite;\n}\n@keyframes msPplPulse {\n  0%,100% { opacity: 1; }\n  50% { opacity: .45; }\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 18px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 22px 0 14px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 22px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 6px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 8px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 18px;\n  padding-right: 32px; /* space for arrow */\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 14px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image (uploaded) */\n  var AUDREY_IMG_URL = \'/mnt/user-data/uploads/1777385203144_image.png\';\n  /* For WordPress runtime, use a relative or absolute URL; fallback to silhouette if needed */\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', isAudrey: false },\n    { id: \'c2\', isAudrey: true  },\n    { id: \'c3\', isAudrey: false },\n  ];\n\n  var MOCK_UNASSIGNED = [\n    { id: \'u1\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u2\', name: \'奧黛麗赫本\', isNew: false, isAudrey: true  },\n    { id: \'u3\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u4\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u5\', name: \'\',       isNew: false, isAudrey: false },\n  ];\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true }\n    ],\n    media_total: 4,\n    media: [\n      { id: \'m1\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m2\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n      { id: \'m3\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m4\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n    ]\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    if (isAudrey) {\n      var img = document.createElement(\'img\');\n      img.src = AUDREY_IMG_URL;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.isAudrey, 64, \'12px\');\n      var faceB = makeAvatarEl(!cand.isAudrey, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { openDetail(); });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    var id = MOCK_IDENTITY;\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      id.aliases.forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (id.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members);\n    renderMediaGrid(id.media);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\';\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = id.aliases.slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Wrong face overlay (shown in view mode, before edit)\n      if (fm.is_wrong) {\n        var overlay = document.createElement(\'div\');\n        overlay.style.cssText =\n          \'position:absolute;top:0;left:0;right:0;bottom:0;\' +\n          \'background:rgba(255,255,255,.88);border-radius:10px;\' +\n          \'display:flex;flex-direction:column;align-items:center;justify-content:center;\' +\n          \'font-size:10px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'line-height:1.4;text-align:center;pointer-events:none;z-index:2;\';\n        overlay.innerHTML =\n          \'<span style=\"color:#d93025;font-weight:700;\">不是此人物</span>\' +\n          \'<span style=\"color:#1967d2;font-size:9.5px;\">右鍵查看選項</span>\';\n        el.appendChild(overlay);\n      }\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          SILHOUETTE_SVG +\n          \'<span class=\"ms-ppl-media-badge\">VIDEO</span>\' +\n          \'<span class=\"ms-ppl-media-dur\">0:02</span>\' +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + item.title + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + item.video_id + \'… · 搜尋結果</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 從 face_members 移除，另建（mock：僅移除並提示）\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n      // TODO: 實際打 POST /people/split-face API\n    }\n    hideCtxMenu();\n  });\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n    MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n    MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n    MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n    MOCK_IDENTITY.aliases = currentAliases.slice();\n    openDetail();\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:12:27','2026-04-28 14:12:27','',1359,'https://wp.momentry.ddns.net/?p=1388',0,'revision','',0),
(1389,4,'2026-04-28 14:17:33','2026-04-28 14:17:33','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <div class=\"ms-ppl-spinner\"></div>\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Spinner / progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner {\n  width: 14px; height: 14px; border-radius: 50%;\n  border: 2px solid #e0e0e0;\n  border-top-color: #1967d2;\n  animation: msPplSpin .8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes msPplSpin { to { transform: rotate(360deg); } }\n\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n  animation: msPplPulse 1.5s ease-in-out infinite;\n}\n@keyframes msPplPulse {\n  0%,100% { opacity: 1; }\n  50% { opacity: .45; }\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image (uploaded) */\n  var AUDREY_IMG_URL = \'/mnt/user-data/uploads/1777385203144_image.png\';\n  /* For WordPress runtime, use a relative or absolute URL; fallback to silhouette if needed */\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', isAudrey: false },\n    { id: \'c2\', isAudrey: true  },\n    { id: \'c3\', isAudrey: false },\n  ];\n\n  var MOCK_UNASSIGNED = [\n    { id: \'u1\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u2\', name: \'奧黛麗赫本\', isNew: false, isAudrey: true  },\n    { id: \'u3\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u4\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u5\', name: \'\',       isNew: false, isAudrey: false },\n  ];\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true }\n    ],\n    media_total: 4,\n    media: [\n      { id: \'m1\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m2\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n      { id: \'m3\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m4\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n    ]\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    if (isAudrey) {\n      var img = document.createElement(\'img\');\n      img.src = AUDREY_IMG_URL;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.isAudrey, 64, \'12px\');\n      var faceB = makeAvatarEl(!cand.isAudrey, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { openDetail(); });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    var id = MOCK_IDENTITY;\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      id.aliases.forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (id.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members);\n    renderMediaGrid(id.media);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\';\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = id.aliases.slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          SILHOUETTE_SVG +\n          \'<span class=\"ms-ppl-media-badge\">VIDEO</span>\' +\n          \'<span class=\"ms-ppl-media-dur\">0:02</span>\' +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + item.title + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + item.video_id + \'… · 搜尋結果</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 從 face_members 移除，另建（mock：僅移除並提示）\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n      // TODO: 實際打 POST /people/split-face API\n    }\n    hideCtxMenu();\n  });\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n    MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n    MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n    MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n    MOCK_IDENTITY.aliases = currentAliases.slice();\n    openDetail();\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:17:33','2026-04-28 14:17:33','',1359,'https://wp.momentry.ddns.net/?p=1389',0,'revision','',0),
(1390,4,'2026-04-28 14:22:15','2026-04-28 14:22:15','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <div class=\"ms-ppl-spinner\"></div>\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Spinner / progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner {\n  width: 14px; height: 14px; border-radius: 50%;\n  border: 2px solid #e0e0e0;\n  border-top-color: #1967d2;\n  animation: msPplSpin .8s linear infinite;\n  flex-shrink: 0;\n}\n@keyframes msPplSpin { to { transform: rotate(360deg); } }\n\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n  animation: msPplPulse 1.5s ease-in-out infinite;\n}\n@keyframes msPplPulse {\n  0%,100% { opacity: 1; }\n  50% { opacity: .45; }\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image (uploaded) */\n  var AUDREY_IMG_URL = \'/mnt/user-data/uploads/1777385203144_image.png\';\n  /* For WordPress runtime, use a relative or absolute URL; fallback to silhouette if needed */\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', isAudrey: false },\n    { id: \'c2\', isAudrey: true  },\n    { id: \'c3\', isAudrey: false },\n  ];\n\n  var MOCK_UNASSIGNED = [\n    { id: \'u1\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u2\', name: \'奧黛麗赫本\', isNew: false, isAudrey: true  },\n    { id: \'u3\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u4\', name: \'\',       isNew: false, isAudrey: false },\n    { id: \'u5\', name: \'\',       isNew: false, isAudrey: false },\n  ];\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true }\n    ],\n    media_total: 4,\n    media: [\n      { id: \'m1\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m2\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n      { id: \'m3\', title: \'Chunk sentence_0093\', video_id: \'384b07f4\' },\n      { id: \'m4\', title: \'Chunk sentence_0665\', video_id: \'384b07f4\' },\n    ]\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    if (isAudrey) {\n      var img = document.createElement(\'img\');\n      img.src = AUDREY_IMG_URL;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.isAudrey, 64, \'12px\');\n      var faceB = makeAvatarEl(!cand.isAudrey, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { openDetail(); });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (id.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          SILHOUETTE_SVG +\n          \'<span class=\"ms-ppl-media-badge\">VIDEO</span>\' +\n          \'<span class=\"ms-ppl-media-dur\">0:02</span>\' +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + item.title + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + item.video_id + \'… · 搜尋結果</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:22:15','2026-04-28 14:22:15','',1359,'https://wp.momentry.ddns.net/?p=1390',0,'revision','',0),
(1391,4,'2026-04-28 14:26:45','2026-04-28 14:26:45','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <svg class=\"ms-ppl-spinner\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { openDetail(); });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (id.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:26:45','2026-04-28 14:26:45','',1359,'https://wp.momentry.ddns.net/?p=1391',0,'revision','',0),
(1392,4,'2026-04-28 14:29:09','2026-04-28 14:29:09','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { openDetail(); });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (id.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:29:09','2026-04-28 14:29:09','',1359,'https://wp.momentry.ddns.net/?p=1392',0,'revision','',0),
(1393,4,'2026-04-28 14:33:37','2026-04-28 14:33:37','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () {\n        openDetailWithData({\n          identity_id: u.id,\n          name: u.name || \'（未命名）\',\n          aliases: [],\n          description: { actor: \'\', role: \'\', notes: \'\' },\n          isAudrey: false,\n          thumb: u.thumb,\n          face_members: [{ id: u.id + \'-fm\', isAudrey: false, thumb: u.thumb }],\n          media_total: 0,\n          media: []\n        });\n      });\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:33:37','2026-04-28 14:33:37','',1359,'https://wp.momentry.ddns.net/?p=1393',0,'revision','',0),
(1394,4,'2026-04-28 14:34:57','2026-04-28 14:34:57','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [{ id: person.id + \'-fm\', isAudrey: false, thumb: person.thumb }],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:34:57','2026-04-28 14:34:57','',1359,'https://wp.momentry.ddns.net/?p=1394',0,'revision','',0),
(1395,4,'2026-04-28 14:36:32','2026-04-28 14:36:32','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId) {\n      // 找到要另建的那個 face_member\n      var splitFm = MOCK_IDENTITY.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      // 從原 identity 的 face strip 移除\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      // TODO: 實際打 POST /people/split-face API，取得新 identity_id\n      // 開啟空白新人物頁，帶入那個臉\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:36:32','2026-04-28 14:36:32','',1359,'https://wp.momentry.ddns.net/?p=1395',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1396,4,'2026-04-28 14:38:53','2026-04-28 14:38:53','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      // 新建人物：建立一個新 identity 物件（mock，之後換 POST /people API）\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      // 加入 unassigned 清單（之後 API 會接管）\n      // TODO: POST /people + POST /people/split-face\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      // 切回 view mode 顯示新建結果（用 openDetail 的邏輯但對象是 newId）\n      openDetailWithData(newId);\n    } else {\n      MOCK_IDENTITY.name = getVal(\'msPplEditName\') || MOCK_IDENTITY.name;\n      MOCK_IDENTITY.description.actor = getVal(\'msPplEditActor\');\n      MOCK_IDENTITY.description.role  = getVal(\'msPplEditRole\');\n      MOCK_IDENTITY.description.notes = getVal(\'msPplEditNotes\');\n      MOCK_IDENTITY.aliases = currentAliases.slice();\n      openDetail();\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () { setEditMode(false); });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:38:53','2026-04-28 14:38:53','',1359,'https://wp.momentry.ddns.net/?p=1396',0,'revision','',0),
(1397,4,'2026-04-28 14:41:13','2026-04-28 14:41:13','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 清空所有 view mode 顯示欄位\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      nameEl.textContent = \'\';\n      nameEl.setAttribute(\'data-placeholder\', \'加入人名\');\n      // 用 placeholder 效果\n      nameEl.style.cssText = \'font-size:20px;font-weight:700;color:#bdc1c6;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      nameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n      var hint = document.getElementById(\'msPplNewAliasHint\');\n      if (hint) hint.addEventListener(\'click\', function() {\n        var val = prompt(\'新增別名：\');\n        if (val && val.trim()) {\n          currentAliases.push(val.trim());\n          renderAliases();\n          // 重新渲染 alias 區（edit mode 的 wrap）\n        }\n      });\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar — 用那個臉的頭像\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (fm.isAudrey) {\n        var img = document.createElement(\'img\');\n        img.src = AUDREY_IMG_URL;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    // Face strip — 只有這一個臉\n    renderFaceStrip([fm]);\n\n    // Media — 空\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    // 進入 edit mode，讓用戶直接填寫\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 儲存時建立新 identity（mock：寫入 MOCK_IDENTITY 以外的地方）\n    var _origSave = document.getElementById(\'msPplSaveBtn\');\n    if (_origSave) {\n      _origSave.dataset.mode = \'new\';\n      _origSave.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () { setEditMode(!editMode); });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (saveBtn.dataset.mode === \'new\') {\n      var newId = {\n        identity_id: \'id-new-\' + Date.now(),\n        name: getVal(\'msPplEditName\') || \'未命名人物\',\n        aliases: currentAliases.slice(),\n        description: {\n          actor: getVal(\'msPplEditActor\'),\n          role:  getVal(\'msPplEditRole\'),\n          notes: getVal(\'msPplEditNotes\')\n        },\n        isAudrey: false,\n        face_members: [{ id: saveBtn.dataset.fmId, isAudrey: false }],\n        media_total: 0,\n        media: []\n      };\n      saveBtn.dataset.mode = \'\';\n      saveBtn.dataset.fmId = \'\';\n      openDetailWithData(newId);\n    } else if (currentIdentity) {\n      // 更新 currentIdentity 的資料\n      currentIdentity.name = getVal(\'msPplEditName\') || currentIdentity.name;\n      currentIdentity.description.actor = getVal(\'msPplEditActor\');\n      currentIdentity.description.role  = getVal(\'msPplEditRole\');\n      currentIdentity.description.notes = getVal(\'msPplEditNotes\');\n      currentIdentity.aliases = currentAliases.slice();\n      // 同步回 SHARED_PEOPLE（若有對應的）\n      var match = SHARED_PEOPLE.find(function(p){ return p.id === currentIdentity.identity_id; });\n      if (match) {\n        match.name        = currentIdentity.name;\n        match.role        = currentIdentity.description.role;\n        match.description = currentIdentity.description.notes;\n        match.people      = currentIdentity.aliases;\n      }\n      // 同步回 MOCK_UNASSIGNED name\n      var uMatch = MOCK_UNASSIGNED.find(function(u){ return u.id === currentIdentity.identity_id; });\n      if (uMatch) uMatch.name = currentIdentity.name;\n      openDetailWithData(currentIdentity);\n    }\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () {\n    if (currentIdentity) {\n      openDetailWithData(currentIdentity);\n    } else {\n      setEditMode(false);\n    }\n  });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:41:13','2026-04-28 14:41:13','',1359,'https://wp.momentry.ddns.net/?p=1397',0,'revision','',0),
(1398,4,'2026-04-28 14:43:35','2026-04-28 14:43:35','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }\n.ms-ppl-face-card {\n  width: 84px; display: flex; flex-direction: column;\n  align-items: center; gap: 7px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 84px; height: 84px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n/* SVG silhouette placeholder */\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 11.5px; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 84px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 建立新的空白 identity 物件，設為 currentIdentity\n    var newIdentity = {\n      identity_id: \'id-new-\' + Date.now(),\n      name: \'\',\n      aliases: [],\n      description: { actor: \'\', role: \'\', notes: \'\' },\n      isAudrey: false,\n      thumb: fm.thumb || null,\n      face_members: [fm],\n      media_total: 0,\n      media: []\n    };\n    currentIdentity = newIdentity;\n\n    // 恢復 name 樣式\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    // view mode 顯示 placeholder 效果\n    var detailNameEl = document.getElementById(\'msPplDetailName\');\n    if (detailNameEl) {\n      detailNameEl.style.cssText =\n        \'font-size:20px;font-weight:700;color:#bdc1c6;\' +\n        \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      detailNameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var newAvatarSrc = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (newAvatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = newAvatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip([fm]);\n\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 標記為新建模式\n    var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtnEl) {\n      saveBtnEl.dataset.mode = \'new\';\n      saveBtnEl.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () {\n    if (!editMode && currentIdentity) {\n      // 進入 edit mode 前先把現有資料填入 fields\n      setVal(\'msPplEditName\',  currentIdentity.name);\n      setVal(\'msPplEditActor\', currentIdentity.description.actor);\n      setVal(\'msPplEditRole\',  currentIdentity.description.role);\n      setVal(\'msPplEditNotes\', currentIdentity.description.notes);\n      currentAliases = (currentIdentity.aliases || []).slice();\n      renderAliases();\n      // 清除 new mode flag（改為一般編輯）\n      var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n      if (saveBtnEl) { saveBtnEl.dataset.mode = \'\'; saveBtnEl.dataset.fmId = \'\'; }\n    }\n    setEditMode(!editMode);\n  });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (!currentIdentity) return;\n\n    // 把 edit fields 的值寫進 currentIdentity\n    currentIdentity.name             = getVal(\'msPplEditName\') || currentIdentity.name || \'未命名人物\';\n    currentIdentity.description.actor = getVal(\'msPplEditActor\');\n    currentIdentity.description.role  = getVal(\'msPplEditRole\');\n    currentIdentity.description.notes = getVal(\'msPplEditNotes\');\n    currentIdentity.aliases           = currentAliases.slice();\n    // 更新 thumb（用 avatar 裡已有的）\n    if (!currentIdentity.thumb && currentIdentity.face_members && currentIdentity.face_members[0]) {\n      currentIdentity.thumb = currentIdentity.face_members[0].thumb || null;\n    }\n\n    // 同步回 SHARED_PEOPLE（若有對應的）\n    var match = SHARED_PEOPLE.find(function(p){ return p.id === currentIdentity.identity_id; });\n    if (match) {\n      match.name        = currentIdentity.name;\n      match.role        = currentIdentity.description.role;\n      match.description = currentIdentity.description.notes;\n      match.people      = currentIdentity.aliases;\n    }\n\n    // 同步回 MOCK_UNASSIGNED name\n    var uMatch = MOCK_UNASSIGNED.find(function(u){ return u.id === currentIdentity.identity_id; });\n    if (uMatch) uMatch.name = currentIdentity.name;\n\n    // 清除 new mode flag\n    saveBtn.dataset.mode = \'\';\n    saveBtn.dataset.fmId = \'\';\n\n    // 重新渲染詳情頁（view mode）\n    openDetailWithData(currentIdentity);\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () {\n    if (currentIdentity) {\n      openDetailWithData(currentIdentity);\n    } else {\n      setEditMode(false);\n    }\n  });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:43:35','2026-04-28 14:43:35','',1359,'https://wp.momentry.ddns.net/?p=1398',0,'revision','',0),
(1399,4,'2026-04-28 14:46:37','2026-04-28 14:46:37','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 150px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 150px; height: 150px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 150px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 0;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 32px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 0; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    MOCK_UNASSIGNED.forEach(function (u, idx) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(idx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(SHARED_PEOPLE[idx]));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 建立新的空白 identity 物件，設為 currentIdentity\n    var newIdentity = {\n      identity_id: \'id-new-\' + Date.now(),\n      name: \'\',\n      aliases: [],\n      description: { actor: \'\', role: \'\', notes: \'\' },\n      isAudrey: false,\n      thumb: fm.thumb || null,\n      face_members: [fm],\n      media_total: 0,\n      media: []\n    };\n    currentIdentity = newIdentity;\n\n    // 恢復 name 樣式\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    // view mode 顯示 placeholder 效果\n    var detailNameEl = document.getElementById(\'msPplDetailName\');\n    if (detailNameEl) {\n      detailNameEl.style.cssText =\n        \'font-size:20px;font-weight:700;color:#bdc1c6;\' +\n        \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      detailNameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var newAvatarSrc = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (newAvatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = newAvatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip([fm]);\n\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 標記為新建模式\n    var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtnEl) {\n      saveBtnEl.dataset.mode = \'new\';\n      saveBtnEl.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () {\n    if (!editMode && currentIdentity) {\n      // 進入 edit mode 前先把現有資料填入 fields\n      setVal(\'msPplEditName\',  currentIdentity.name);\n      setVal(\'msPplEditActor\', currentIdentity.description.actor);\n      setVal(\'msPplEditRole\',  currentIdentity.description.role);\n      setVal(\'msPplEditNotes\', currentIdentity.description.notes);\n      currentAliases = (currentIdentity.aliases || []).slice();\n      renderAliases();\n      // 清除 new mode flag（改為一般編輯）\n      var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n      if (saveBtnEl) { saveBtnEl.dataset.mode = \'\'; saveBtnEl.dataset.fmId = \'\'; }\n    }\n    setEditMode(!editMode);\n  });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (!currentIdentity) return;\n\n    // 把 edit fields 的值寫進 currentIdentity\n    currentIdentity.name             = getVal(\'msPplEditName\') || currentIdentity.name || \'未命名人物\';\n    currentIdentity.description.actor = getVal(\'msPplEditActor\');\n    currentIdentity.description.role  = getVal(\'msPplEditRole\');\n    currentIdentity.description.notes = getVal(\'msPplEditNotes\');\n    currentIdentity.aliases           = currentAliases.slice();\n    // 更新 thumb（用 avatar 裡已有的）\n    if (!currentIdentity.thumb && currentIdentity.face_members && currentIdentity.face_members[0]) {\n      currentIdentity.thumb = currentIdentity.face_members[0].thumb || null;\n    }\n\n    // 同步回 SHARED_PEOPLE（若有對應的）\n    var match = SHARED_PEOPLE.find(function(p){ return p.id === currentIdentity.identity_id; });\n    if (match) {\n      match.name        = currentIdentity.name;\n      match.role        = currentIdentity.description.role;\n      match.description = currentIdentity.description.notes;\n      match.people      = currentIdentity.aliases;\n    }\n\n    // 同步回 MOCK_UNASSIGNED name\n    var uMatch = MOCK_UNASSIGNED.find(function(u){ return u.id === currentIdentity.identity_id; });\n    if (uMatch) uMatch.name = currentIdentity.name;\n\n    // 清除 new mode flag\n    saveBtn.dataset.mode = \'\';\n    saveBtn.dataset.fmId = \'\';\n\n    // 重新渲染詳情頁（view mode）\n    openDetailWithData(currentIdentity);\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () {\n    if (currentIdentity) {\n      openDetailWithData(currentIdentity);\n    } else {\n      setEditMode(false);\n    }\n  });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:46:37','2026-04-28 14:46:37','',1359,'https://wp.momentry.ddns.net/?p=1399',0,'revision','',0),
(1400,4,'2026-04-28 14:48:05','2026-04-28 14:48:05','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 150px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 150px; height: 150px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 150px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 20px;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 52px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 20px; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var sorted = getSortedUnassigned();\n    sorted.forEach(function (u, idx) {\n      // 找到在原始 SHARED_PEOPLE 中的 index（用於取得完整資料）\n      var personIdx = SHARED_PEOPLE.findIndex(function(p){ return p.id === u.id; });\n      var person = SHARED_PEOPLE[personIdx] || SHARED_PEOPLE[idx] || SHARED_PEOPLE[0];\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(personIdx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(personIdx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(person));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 建立新的空白 identity 物件，設為 currentIdentity\n    var newIdentity = {\n      identity_id: \'id-new-\' + Date.now(),\n      name: \'\',\n      aliases: [],\n      description: { actor: \'\', role: \'\', notes: \'\' },\n      isAudrey: false,\n      thumb: fm.thumb || null,\n      face_members: [fm],\n      media_total: 0,\n      media: []\n    };\n    currentIdentity = newIdentity;\n\n    // 恢復 name 樣式\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    // view mode 顯示 placeholder 效果\n    var detailNameEl = document.getElementById(\'msPplDetailName\');\n    if (detailNameEl) {\n      detailNameEl.style.cssText =\n        \'font-size:20px;font-weight:700;color:#bdc1c6;\' +\n        \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      detailNameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var newAvatarSrc = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (newAvatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = newAvatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip([fm]);\n\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 標記為新建模式\n    var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtnEl) {\n      saveBtnEl.dataset.mode = \'new\';\n      saveBtnEl.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () {\n    if (!editMode && currentIdentity) {\n      // 進入 edit mode 前先把現有資料填入 fields\n      setVal(\'msPplEditName\',  currentIdentity.name);\n      setVal(\'msPplEditActor\', currentIdentity.description.actor);\n      setVal(\'msPplEditRole\',  currentIdentity.description.role);\n      setVal(\'msPplEditNotes\', currentIdentity.description.notes);\n      currentAliases = (currentIdentity.aliases || []).slice();\n      renderAliases();\n      // 清除 new mode flag（改為一般編輯）\n      var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n      if (saveBtnEl) { saveBtnEl.dataset.mode = \'\'; saveBtnEl.dataset.fmId = \'\'; }\n    }\n    setEditMode(!editMode);\n  });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (!currentIdentity) return;\n\n    // 把 edit fields 的值寫進 currentIdentity\n    currentIdentity.name             = getVal(\'msPplEditName\') || currentIdentity.name || \'未命名人物\';\n    currentIdentity.description.actor = getVal(\'msPplEditActor\');\n    currentIdentity.description.role  = getVal(\'msPplEditRole\');\n    currentIdentity.description.notes = getVal(\'msPplEditNotes\');\n    currentIdentity.aliases           = currentAliases.slice();\n    // 更新 thumb（用 avatar 裡已有的）\n    if (!currentIdentity.thumb && currentIdentity.face_members && currentIdentity.face_members[0]) {\n      currentIdentity.thumb = currentIdentity.face_members[0].thumb || null;\n    }\n\n    // 同步回 SHARED_PEOPLE（若有對應的）\n    var match = SHARED_PEOPLE.find(function(p){ return p.id === currentIdentity.identity_id; });\n    if (match) {\n      match.name        = currentIdentity.name;\n      match.role        = currentIdentity.description.role;\n      match.description = currentIdentity.description.notes;\n      match.people      = currentIdentity.aliases;\n    }\n\n    // 同步回 MOCK_UNASSIGNED name\n    var uMatch = MOCK_UNASSIGNED.find(function(u){ return u.id === currentIdentity.identity_id; });\n    if (uMatch) uMatch.name = currentIdentity.name;\n\n    // 清除 new mode flag\n    saveBtn.dataset.mode = \'\';\n    saveBtn.dataset.fmId = \'\';\n\n    // 重新渲染詳情頁（view mode）\n    openDetailWithData(currentIdentity);\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () {\n    if (currentIdentity) {\n      openDetailWithData(currentIdentity);\n    } else {\n      setEditMode(false);\n    }\n  });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  // 排序 radio 變更時重新渲染 unassigned grid\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function(radio) {\n    radio.addEventListener(\'change\', function() {\n      renderUnassigned();\n      sortPanel.classList.remove(\'show\');\n    });\n  });\n\n  function getSortedUnassigned() {\n    var sort = (document.querySelector(\'input[name=\"ms-ppl-sort\"]:checked\') || {}).value || \'time\';\n    var items = MOCK_UNASSIGNED.slice();\n    if (sort === \'name\') {\n      items.sort(function(a, b) {\n        return (a.name || \'\').localeCompare(b.name || \'\', \'zh-TW\');\n      });\n    }\n    // \'time\' → 維持原始順序（index 順序即加入時間）\n    return items;\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理','','inherit','closed','closed','','1359-revision-v1','','','2026-04-28 14:48:05','2026-04-28 14:48:05','',1359,'https://wp.momentry.ddns.net/?p=1400',0,'revision','',0),
(1401,6,'2026-04-29 00:33:28','2026-04-29 00:33:28','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Evaluation 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Evaluation </h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Search Lab','','inherit','closed','closed','','1035-revision-v1','','','2026-04-29 00:33:28','2026-04-29 00:33:28','',1035,'https://wp.momentry.ddns.net/?p=1401',0,'revision','',0),
(1403,1,'2026-04-29 03:47:53','2026-04-29 03:47:53','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n/* ★ 已改：右上對話氣泡跟主題色走 */\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n/* ★ 已改：左右按鈕跟主題色走 */\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ★ Search Lab 樣式 — 對齊白灰風格 */\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<script>\n  var DEFAULT_VIDEO_UUID = \"384b0ff44aaaa1f1\";\n</script>\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\nvar list = \n\'https://api.momentry.ddns.net/api/v1/person/list\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){\n    hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\');\n  }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return {\n    r: (num >> 16) & 255,\n    g: (num >> 8) & 255,\n    b: num & 255\n  };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return {\n    r: Math.round(parseFloat(m[1])),\n    g: Math.round(parseFloat(m[2])),\n    b: Math.round(parseFloat(m[3]))\n  };\n}\n\nfunction rgbToString(rgb){\n  if(!rgb) return \'\';\n  return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\';\n}\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return {\n    r: Math.round(c1.r + (c2.r - c1.r) * ratio),\n    g: Math.round(c1.g + (c2.g - c1.g) * ratio),\n    b: Math.round(c1.b + (c2.b - c1.b) * ratio)\n  };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\n    \'.gs-nav a.active\',\n    \'.gs-nav .active\',\n    \'.gs-nav a[href*=\"lt-searching\"]\',\n    \'.gs-nav a[href*=\"home\"]\',\n    \'.gs-nav a\'\n  ];\n\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]);\n    if(!el) continue;\n\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike =\n      text.indexOf(\'home\') > -1 ||\n      text.indexOf(\'首頁\') > -1 ||\n      text.indexOf(\'主页\') > -1;\n\n    var cs = window.getComputedStyle(el);\n    var bg = cs.backgroundColor;\n    var color = cs.color;\n\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){\n      return {\n        accentLight: bg,\n        accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null\n      };\n    }\n  }\n\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){\n    var cs2 = window.getComputedStyle(activeEl);\n    if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){\n      return {\n        accentLight: cs2.backgroundColor,\n        accentDark: cs2.color\n      };\n    }\n  }\n\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\');\n  if(!root) return;\n\n  var theme = getSidebarThemeColor();\n  if(!theme || !theme.accentLight) return;\n\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight);\n  if(!lightRgb) return;\n\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){\n    darkRgb = { r: 90, g: 96, b: 114 };\n  }\n\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n\n  if(!window.MutationObserver) return;\n\n  var target = document.body || document.documentElement;\n  if(!target) return;\n\n  var mo = new MutationObserver(function(){\n    clearTimeout(window.__msThemeSyncTimer);\n    window.__msThemeSyncTimer = setTimeout(function(){\n      applySyncedTheme();\n    }, 50);\n  });\n\n  mo.observe(target,{\n    attributes:true,\n    childList:true,\n    subtree:true,\n    attributeFilter:[\'class\',\'style\']\n  });\n\n  document.addEventListener(\'click\', function(){\n    setTimeout(applySyncedTheme, 30);\n    setTimeout(applySyncedTheme, 120);\n    setTimeout(applySyncedTheme, 260);\n  });\n\n  window.addEventListener(\'storage\', function(){\n    setTimeout(applySyncedTheme, 80);\n  });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') {\n    return;\n  }\n\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\';\n  if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\');\n  if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\';\n  if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\');\n  if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\');\n    var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory();\n    var trimmed=String(query || \'\').trim();\n    if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem);\n    items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items);\n    CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);});\n    if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory());\n  var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\';\n  var videoId  = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end;\n  var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  const payload = {\n    query: query,\n    video_uuid: DEFAULT_VIDEO_UUID,\n    limit: 3000\n  };\n\n  return fetch(SEARCH_ENDPOINT,{\n    method:\'POST\',\n    headers:{\'Content-Type\':\'application/json\'},\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid);\n  if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true});\n  if(window.ResizeObserver) new ResizeObserver(u).observe(sc);\n  setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return;\n    card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\');\n    if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {};\n    var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\');\n      vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v);\n        v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return;\n    var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\');\n    if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid;\n    if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id);\n    bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t;\n  userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL();\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return;\n    if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\');\n  var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\';\n      if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\');\n  ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){\n      try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){\n      switchToSearchLab();\n    } else {\n      switchToSearch();\n    }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','momentry-demo','','inherit','closed','closed','','360-revision-v1','','','2026-04-29 03:47:53','2026-04-29 03:47:53','',360,'https://wp.momentry.ddns.net/?p=1403',0,'revision','',0),
(1404,1,'2026-04-29 03:48:21','2026-04-29 03:48:21','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n/* ★ 已改：右上對話氣泡跟主題色走 */\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n/* ★ 已改：左右按鈕跟主題色走 */\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ★ Search Lab 樣式 — 對齊白灰風格 */\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<script>\n  var DEFAULT_VIDEO_UUID = \"384b0ff44aaaa1f1\";\n</script>\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\nvar list = \n\'https://api.momentry.ddns.net/api/v1/person/list\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){\n    hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\');\n  }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return {\n    r: (num >> 16) & 255,\n    g: (num >> 8) & 255,\n    b: num & 255\n  };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return {\n    r: Math.round(parseFloat(m[1])),\n    g: Math.round(parseFloat(m[2])),\n    b: Math.round(parseFloat(m[3]))\n  };\n}\n\nfunction rgbToString(rgb){\n  if(!rgb) return \'\';\n  return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\';\n}\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return {\n    r: Math.round(c1.r + (c2.r - c1.r) * ratio),\n    g: Math.round(c1.g + (c2.g - c1.g) * ratio),\n    b: Math.round(c1.b + (c2.b - c1.b) * ratio)\n  };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\n    \'.gs-nav a.active\',\n    \'.gs-nav .active\',\n    \'.gs-nav a[href*=\"lt-searching\"]\',\n    \'.gs-nav a[href*=\"home\"]\',\n    \'.gs-nav a\'\n  ];\n\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]);\n    if(!el) continue;\n\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike =\n      text.indexOf(\'home\') > -1 ||\n      text.indexOf(\'首頁\') > -1 ||\n      text.indexOf(\'主页\') > -1;\n\n    var cs = window.getComputedStyle(el);\n    var bg = cs.backgroundColor;\n    var color = cs.color;\n\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){\n      return {\n        accentLight: bg,\n        accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null\n      };\n    }\n  }\n\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){\n    var cs2 = window.getComputedStyle(activeEl);\n    if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){\n      return {\n        accentLight: cs2.backgroundColor,\n        accentDark: cs2.color\n      };\n    }\n  }\n\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\');\n  if(!root) return;\n\n  var theme = getSidebarThemeColor();\n  if(!theme || !theme.accentLight) return;\n\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight);\n  if(!lightRgb) return;\n\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){\n    darkRgb = { r: 90, g: 96, b: 114 };\n  }\n\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n\n  if(!window.MutationObserver) return;\n\n  var target = document.body || document.documentElement;\n  if(!target) return;\n\n  var mo = new MutationObserver(function(){\n    clearTimeout(window.__msThemeSyncTimer);\n    window.__msThemeSyncTimer = setTimeout(function(){\n      applySyncedTheme();\n    }, 50);\n  });\n\n  mo.observe(target,{\n    attributes:true,\n    childList:true,\n    subtree:true,\n    attributeFilter:[\'class\',\'style\']\n  });\n\n  document.addEventListener(\'click\', function(){\n    setTimeout(applySyncedTheme, 30);\n    setTimeout(applySyncedTheme, 120);\n    setTimeout(applySyncedTheme, 260);\n  });\n\n  window.addEventListener(\'storage\', function(){\n    setTimeout(applySyncedTheme, 80);\n  });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') {\n    return;\n  }\n\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\';\n  if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\');\n  if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\';\n  if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\');\n  if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\');\n    var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory();\n    var trimmed=String(query || \'\').trim();\n    if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem);\n    items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items);\n    CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);});\n    if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory());\n  var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\';\n  var videoId  = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end;\n  var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  const payload = {\n    query: query,\n    video_uuid: DEFAULT_VIDEO_UUID,\n    limit: 3000\n  };\n\n  return fetch(SEARCH_ENDPOINT,{\n    method:\'POST\',\n    headers:{\'Content-Type\':\'application/json\'},\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid);\n  if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true});\n  if(window.ResizeObserver) new ResizeObserver(u).observe(sc);\n  setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return;\n    card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\');\n    if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {};\n    var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\');\n      vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v);\n        v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return;\n    var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\');\n    if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid;\n    if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id);\n    bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t;\n  userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL();\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return;\n    if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\');\n  var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\';\n      if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\');\n  ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){\n      try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){\n      switchToSearchLab();\n    } else {\n      switchToSearch();\n    }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','momentry-demo','','inherit','closed','closed','','360-revision-v1','','','2026-04-29 03:48:21','2026-04-29 03:48:21','',360,'https://wp.momentry.ddns.net/?p=1404',0,'revision','',0),
(1405,1,'2026-04-29 03:52:20','2026-04-29 03:52:20','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n/* ★ 已改：右上對話氣泡跟主題色走 */\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n/* ★ 已改：左右按鈕跟主題色走 */\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ★ Search Lab 樣式 — 對齊白灰風格 */\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<script>\n  var DEFAULT_VIDEO_UUID = \"384b0ff44aaaa1f1\";\n</script>\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\nvar list = \n\'GET /api/v1/person/list?video_uuid=384b0ff44aaaa1f1\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){\n    hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\');\n  }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return {\n    r: (num >> 16) & 255,\n    g: (num >> 8) & 255,\n    b: num & 255\n  };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return {\n    r: Math.round(parseFloat(m[1])),\n    g: Math.round(parseFloat(m[2])),\n    b: Math.round(parseFloat(m[3]))\n  };\n}\n\nfunction rgbToString(rgb){\n  if(!rgb) return \'\';\n  return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\';\n}\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return {\n    r: Math.round(c1.r + (c2.r - c1.r) * ratio),\n    g: Math.round(c1.g + (c2.g - c1.g) * ratio),\n    b: Math.round(c1.b + (c2.b - c1.b) * ratio)\n  };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\n    \'.gs-nav a.active\',\n    \'.gs-nav .active\',\n    \'.gs-nav a[href*=\"lt-searching\"]\',\n    \'.gs-nav a[href*=\"home\"]\',\n    \'.gs-nav a\'\n  ];\n\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]);\n    if(!el) continue;\n\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike =\n      text.indexOf(\'home\') > -1 ||\n      text.indexOf(\'首頁\') > -1 ||\n      text.indexOf(\'主页\') > -1;\n\n    var cs = window.getComputedStyle(el);\n    var bg = cs.backgroundColor;\n    var color = cs.color;\n\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){\n      return {\n        accentLight: bg,\n        accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null\n      };\n    }\n  }\n\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){\n    var cs2 = window.getComputedStyle(activeEl);\n    if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){\n      return {\n        accentLight: cs2.backgroundColor,\n        accentDark: cs2.color\n      };\n    }\n  }\n\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\');\n  if(!root) return;\n\n  var theme = getSidebarThemeColor();\n  if(!theme || !theme.accentLight) return;\n\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight);\n  if(!lightRgb) return;\n\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){\n    darkRgb = { r: 90, g: 96, b: 114 };\n  }\n\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n\n  if(!window.MutationObserver) return;\n\n  var target = document.body || document.documentElement;\n  if(!target) return;\n\n  var mo = new MutationObserver(function(){\n    clearTimeout(window.__msThemeSyncTimer);\n    window.__msThemeSyncTimer = setTimeout(function(){\n      applySyncedTheme();\n    }, 50);\n  });\n\n  mo.observe(target,{\n    attributes:true,\n    childList:true,\n    subtree:true,\n    attributeFilter:[\'class\',\'style\']\n  });\n\n  document.addEventListener(\'click\', function(){\n    setTimeout(applySyncedTheme, 30);\n    setTimeout(applySyncedTheme, 120);\n    setTimeout(applySyncedTheme, 260);\n  });\n\n  window.addEventListener(\'storage\', function(){\n    setTimeout(applySyncedTheme, 80);\n  });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') {\n    return;\n  }\n\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\';\n  if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\');\n  if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\';\n  if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\');\n  if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\');\n    var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory();\n    var trimmed=String(query || \'\').trim();\n    if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem);\n    items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items);\n    CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);});\n    if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory());\n  var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\';\n  var videoId  = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end;\n  var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  const payload = {\n    query: query,\n    video_uuid: DEFAULT_VIDEO_UUID,\n    limit: 3000\n  };\n\n  return fetch(SEARCH_ENDPOINT,{\n    method:\'POST\',\n    headers:{\'Content-Type\':\'application/json\'},\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid);\n  if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true});\n  if(window.ResizeObserver) new ResizeObserver(u).observe(sc);\n  setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return;\n    card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\');\n    if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {};\n    var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\');\n      vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v);\n        v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return;\n    var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\');\n    if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid;\n    if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id);\n    bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t;\n  userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL();\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return;\n    if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\');\n  var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\';\n      if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\');\n  ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){\n      try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){\n      switchToSearchLab();\n    } else {\n      switchToSearch();\n    }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','momentry-demo','','inherit','closed','closed','','360-revision-v1','','','2026-04-29 03:52:20','2026-04-29 03:52:20','',360,'https://wp.momentry.ddns.net/?p=1405',0,'revision','',0),
(1406,1,'2026-04-29 03:53:20','2026-04-29 03:53:20','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n/* ★ 已改：右上對話氣泡跟主題色走 */\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n/* ★ 已改：左右按鈕跟主題色走 */\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ★ Search Lab 樣式 — 對齊白灰風格 */\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<script>\n  var DEFAULT_VIDEO_UUID = \"384b0ff44aaaa1f1\";\n</script>\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){\n    hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\');\n  }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return {\n    r: (num >> 16) & 255,\n    g: (num >> 8) & 255,\n    b: num & 255\n  };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return {\n    r: Math.round(parseFloat(m[1])),\n    g: Math.round(parseFloat(m[2])),\n    b: Math.round(parseFloat(m[3]))\n  };\n}\n\nfunction rgbToString(rgb){\n  if(!rgb) return \'\';\n  return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\';\n}\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return {\n    r: Math.round(c1.r + (c2.r - c1.r) * ratio),\n    g: Math.round(c1.g + (c2.g - c1.g) * ratio),\n    b: Math.round(c1.b + (c2.b - c1.b) * ratio)\n  };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\n    \'.gs-nav a.active\',\n    \'.gs-nav .active\',\n    \'.gs-nav a[href*=\"lt-searching\"]\',\n    \'.gs-nav a[href*=\"home\"]\',\n    \'.gs-nav a\'\n  ];\n\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]);\n    if(!el) continue;\n\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike =\n      text.indexOf(\'home\') > -1 ||\n      text.indexOf(\'首頁\') > -1 ||\n      text.indexOf(\'主页\') > -1;\n\n    var cs = window.getComputedStyle(el);\n    var bg = cs.backgroundColor;\n    var color = cs.color;\n\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){\n      return {\n        accentLight: bg,\n        accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null\n      };\n    }\n  }\n\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){\n    var cs2 = window.getComputedStyle(activeEl);\n    if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){\n      return {\n        accentLight: cs2.backgroundColor,\n        accentDark: cs2.color\n      };\n    }\n  }\n\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\');\n  if(!root) return;\n\n  var theme = getSidebarThemeColor();\n  if(!theme || !theme.accentLight) return;\n\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight);\n  if(!lightRgb) return;\n\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){\n    darkRgb = { r: 90, g: 96, b: 114 };\n  }\n\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n\n  if(!window.MutationObserver) return;\n\n  var target = document.body || document.documentElement;\n  if(!target) return;\n\n  var mo = new MutationObserver(function(){\n    clearTimeout(window.__msThemeSyncTimer);\n    window.__msThemeSyncTimer = setTimeout(function(){\n      applySyncedTheme();\n    }, 50);\n  });\n\n  mo.observe(target,{\n    attributes:true,\n    childList:true,\n    subtree:true,\n    attributeFilter:[\'class\',\'style\']\n  });\n\n  document.addEventListener(\'click\', function(){\n    setTimeout(applySyncedTheme, 30);\n    setTimeout(applySyncedTheme, 120);\n    setTimeout(applySyncedTheme, 260);\n  });\n\n  window.addEventListener(\'storage\', function(){\n    setTimeout(applySyncedTheme, 80);\n  });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') {\n    return;\n  }\n\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\';\n  if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\');\n  if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\');\n  var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\';\n  if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\');\n  if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\');\n    var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory();\n    var trimmed=String(query || \'\').trim();\n    if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem);\n    items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items);\n    CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);});\n    if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return;\n    var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); });\n    if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory());\n  var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\';\n  var videoId  = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end;\n  var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  const payload = {\n    query: query,\n    video_uuid: DEFAULT_VIDEO_UUID,\n    limit: 3000\n  };\n\n  return fetch(SEARCH_ENDPOINT,{\n    method:\'POST\',\n    headers:{\'Content-Type\':\'application/json\'},\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid);\n  if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true});\n  if(window.ResizeObserver) new ResizeObserver(u).observe(sc);\n  setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return;\n    card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\');\n    if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {};\n    var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\');\n      vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v);\n        v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return;\n    var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\');\n    if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid;\n    if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id);\n    bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t;\n  userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL();\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return;\n    if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\');\n  var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\';\n      if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\');\n  ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){\n      try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){\n      switchToSearchLab();\n    } else {\n      switchToSearch();\n    }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','momentry-demo','','inherit','closed','closed','','360-revision-v1','','','2026-04-29 03:53:20','2026-04-29 03:53:20','',360,'https://wp.momentry.ddns.net/?p=1406',0,'revision','',0),
(1407,6,'2026-04-30 03:25:44','2026-04-30 03:25:44','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction makeSmartTitle(query){\n  query = String(query || \'\').trim();\n  if(!query) return \'New search\';\n  if(query.length <= 18) return query;\n\n  return query\n    .replace(/[，。！？,.!?]/g, \' \')\n    .replace(/\\s+/g, \' \')\n    .slice(0, 18)\n    .trim() + \'…\';\n}\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    var chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    var items = getSearchHistory();\n    var trimmed = String(query || \'\').trim();\n    if(!trimmed) return;\n\n    var normalizedQuery = trimmed.toLowerCase();\n\n    var existingIndex = items.findIndex(function(it){\n      var oldQuery = String(it.query || \'\').trim().toLowerCase();\n\n      // ✅ 如果当前已经有选中的历史，就更新当前历史\n      if(CURRENT_HISTORY_ID && String(it.id) === String(CURRENT_HISTORY_ID)) return true;\n\n      // ✅ 如果输入内容一样，就不新增，直接更新旧历史\n      return oldQuery === normalizedQuery;\n    });\n\n    var existing = existingIndex > -1 ? items[existingIndex] : null;\n    var newId = existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n\n    var newItem = {\n      id: newId,\n      query: trimmed,\n\n      // ✅ 自动生成短标题\n      title: existing && existing.title ? existing.title : makeSmartTitle(trimmed),\n\n      snippet: \'搜尋紀錄\',\n      chatHtml: chatHtml,\n      cardsData: Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [],\n      updatedAt: new Date().toISOString(),\n      createdAt: existing && existing.createdAt ? existing.createdAt : new Date().toISOString(),\n      pinned: existing ? !!existing.pinned : false\n    };\n\n    if(existingIndex > -1) {\n      items.splice(existingIndex, 1);\n    }\n\n    items.unshift(newItem);\n    items = sortHistory(items);\n\n    if(items.length > 30) items = items.slice(0, 30);\n\n    saveSearchHistory(items);\n\n    CURRENT_HISTORY_ID = newId;\n\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\', {\n      detail: { selectedId: String(newId) }\n    }));\n\n  }catch(err){\n    console.warn(\'upsertSearchHistory failed\', err);\n  }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:25:44','2026-04-30 03:25:44','',523,'https://wp.momentry.ddns.net/?p=1407',0,'revision','',0),
(1409,6,'2026-04-30 03:26:47','2026-04-30 03:26:47','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style> \n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction makeSmartTitle(query){\n  query = String(query || \'\').trim();\n  if(!query) return \'New search\';\n  if(query.length <= 18) return query;\n\n  return query\n    .replace(/[，。！？,.!?]/g, \' \')\n    .replace(/\\s+/g, \' \')\n    .slice(0, 18)\n    .trim() + \'…\';\n}\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    var chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    var items = getSearchHistory();\n    var trimmed = String(query || \'\').trim();\n    if(!trimmed) return;\n\n    var normalizedQuery = trimmed.toLowerCase();\n\n    var existingIndex = items.findIndex(function(it){\n      var oldQuery = String(it.query || \'\').trim().toLowerCase();\n\n      // ✅ 如果当前已经有选中的历史，就更新当前历史\n      if(CURRENT_HISTORY_ID && String(it.id) === String(CURRENT_HISTORY_ID)) return true;\n\n      // ✅ 如果输入内容一样，就不新增，直接更新旧历史\n      return oldQuery === normalizedQuery;\n    });\n\n    var existing = existingIndex > -1 ? items[existingIndex] : null;\n    var newId = existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n\n    var newItem = {\n      id: newId,\n      query: trimmed,\n\n      // ✅ 自动生成短标题\n      title: existing && existing.title ? existing.title : makeSmartTitle(trimmed),\n\n      snippet: \'搜尋紀錄\',\n      chatHtml: chatHtml,\n      cardsData: Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [],\n      updatedAt: new Date().toISOString(),\n      createdAt: existing && existing.createdAt ? existing.createdAt : new Date().toISOString(),\n      pinned: existing ? !!existing.pinned : false\n    };\n\n    if(existingIndex > -1) {\n      items.splice(existingIndex, 1);\n    }\n\n    items.unshift(newItem);\n    items = sortHistory(items);\n\n    if(items.length > 30) items = items.slice(0, 30);\n\n    saveSearchHistory(items);\n\n    CURRENT_HISTORY_ID = newId;\n\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\', {\n      detail: { selectedId: String(newId) }\n    }));\n\n  }catch(err){\n    console.warn(\'upsertSearchHistory failed\', err);\n  }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:26:47','2026-04-30 03:26:47','',523,'https://wp.momentry.ddns.net/?p=1409',0,'revision','',0),
(1410,6,'2026-04-30 03:27:13','2026-04-30 03:27:13','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:27:13','2026-04-30 03:27:13','',523,'https://wp.momentry.ddns.net/?p=1410',0,'revision','',0),
(1411,6,'2026-04-30 03:42:58','2026-04-30 03:42:58','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\nwindow.addEventListener(\"ms-restore-history\", function () {\n  const chatHtml = sessionStorage.getItem(\"ms_chat_html\") || \"\";\n  const lastQuery = sessionStorage.getItem(\"ms_last_query\") || \"\";\n\n  const chatBox = document.getElementById(\"chatMessages\");\n\n  if (chatBox && chatHtml) {\n    chatBox.innerHTML = chatHtml;\n  }\n\n  if (typeof window.restoreSearchCards === \"function\") {\n    window.restoreSearchCards();\n  }\n\n  if (typeof window.renderCardsFromHistory === \"function\") {\n    window.renderCardsFromHistory();\n  }\n\n  console.log(\"History restored without page reload:\", lastQuery);\n});\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:42:58','2026-04-30 03:42:58','',523,'https://wp.momentry.ddns.net/?p=1411',0,'revision','',0),
(1413,6,'2026-04-30 03:43:20','2026-04-30 03:43:20','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\nwindow.addEventListener(\"ms-restore-history\", function () {\n  const chatHtml = sessionStorage.getItem(\"ms_chat_html\") || \"\";\n  const lastQuery = sessionStorage.getItem(\"ms_last_query\") || \"\";\n\n  const chatBox = document.getElementById(\"chatMessages\");\n\n  if (chatBox && chatHtml) {\n    chatBox.innerHTML = chatHtml;\n  }\n\n  if (typeof window.restoreSearchCards === \"function\") {\n    window.restoreSearchCards();\n  }\n\n  if (typeof window.renderCardsFromHistory === \"function\") {\n    window.renderCardsFromHistory();\n  }\n\n  console.log(\"History restored without page reload:\", lastQuery);\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:43:20','2026-04-30 03:43:20','',523,'https://wp.momentry.ddns.net/?p=1413',0,'revision','',0),
(1414,6,'2026-04-30 03:43:31','2026-04-30 03:43:31','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\';\nfunction renderBK(){ var l=document.getElementById(\'msBKL\'); if(!l) return; if(!BKS.length){ l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\'; return; } l.innerHTML=BKS.map(function(b){ return \'<div class=\"bkrow\"><div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div><button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button></div>\'; }).join(\'\'); }\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){ var range=sel.getRangeAt(0); inChat=chatEl&&chatEl.contains(range.commonAncestorContainer); }\n    if(txt&&inChat){\n      pendingSel=txt;\n      var range=sel.getRangeAt(0), rect=range.getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })) BKS.push({id:\'sel\'+(++bkN),label:kw});\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\';\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){ if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; } });\nrenderBK();\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\ndocument.addEventListener(\'click\',function(ev){ var rm=ev.target.closest(\'.bkrm\'); if(!rm) return; var idx=BKS.findIndex(function(b){ return b.id===rm.dataset.bkid; }); if(idx>=0) BKS.splice(idx,1); renderBK(); });\nvar msBKBtn=document.getElementById(\'msBKBtn\'); if(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\'); if(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-04-30 03:43:31','2026-04-30 03:43:31','',523,'https://wp.momentry.ddns.net/?p=1414',0,'revision','',0),
(1416,1,'2026-05-02 12:03:13','2026-05-02 12:03:13','<!-- wp:html -->\n<!--\nMomentry Mini REST API Test HTML\n用途：小型測試頁，用來確認 WordPress REST route 是否能轉接 AI Core。\n\n架構：HTML → WordPress REST API → PHP → AI Core\n不使用 n8n。\n不使用 admin-ajax。\n不要把 API Key 放在 HTML。\n\n請搭配 PHP routes：/wp-json/momentry/v1/*\n-->\n\n<div id=\"momentry-mini-rest-test\" style=\"max-width:820px;margin:0 auto;padding:22px;border:1px solid #e5eaf2;border-radius:18px;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',\'Noto Sans TC\',\'Microsoft JhengHei\',Arial,sans-serif;color:#172033;\">\n  <h2 style=\"margin:0 0 8px;font-size:22px;letter-spacing:-.03em;\">Momentry Mini REST API Test</h2>\n  <p style=\"margin:0 0 18px;color:#667085;line-height:1.6;font-size:14px;\">\n    用來確認 WordPress REST routes 是否正常轉接 AI Core。HTML 不放 API Key，API Key 由 PHP 加上。\n  </p>\n\n  <div style=\"margin-bottom:14px;\">\n    <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">REST Base URL</label>\n    <input id=\"mrt_base\" value=\"/wp-json/momentry/v1\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n  </div>\n\n  <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;\">\n    <div>\n      <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">UUID</label>\n      <input id=\"mrt_uuid\" placeholder=\"先按 videos 取得 uuid\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n    </div>\n    <div>\n      <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">Search Query</label>\n      <input id=\"mrt_query\" value=\"sun\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n    </div>\n  </div>\n\n  <div style=\"display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;\">\n    <button onclick=\"MRT_call(\'GET\',\'/health\',null,this)\" style=\"padding:10px 14px;border:0;border-radius:12px;background:#2563eb;color:white;font-weight:700;cursor:pointer;\">health</button>\n    <button onclick=\"MRT_videos(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">videos</button>\n    <button onclick=\"MRT_call(\'GET\',\'/scan\',null,this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">scan</button>\n    <button onclick=\"MRT_lookup(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">lookup</button>\n    <button onclick=\"MRT_process(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">process</button>\n    <button onclick=\"MRT_progress(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">progress</button>\n    <button onclick=\"MRT_search(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">search</button>\n    <button onclick=\"MRT_clear()\" style=\"padding:10px 14px;border:1px solid #fecaca;border-radius:12px;background:white;color:#b91c1c;font-weight:700;cursor:pointer;\">clear</button>\n  </div>\n\n  <div id=\"mrt_status\" style=\"margin-bottom:10px;padding:10px 12px;border-radius:12px;background:white;border:1px solid #e5eaf2;font-size:13px;color:#667085;\">\n    Ready. 請先按 health，再按 videos。\n  </div>\n\n  <pre id=\"mrt_result\" style=\"margin:0;padding:14px;border-radius:14px;background:#0f172a;color:#dbeafe;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto;\">No response yet.</pre>\n</div>\n\n<script>\nfunction MRT_get(id){ return document.getElementById(id); }\nfunction MRT_base(){ return MRT_get(\'mrt_base\').value.replace(/\\/$/, \'\'); }\nfunction MRT_uuid(){ return MRT_get(\'mrt_uuid\').value.trim(); }\nfunction MRT_query(){ return MRT_get(\'mrt_query\').value.trim() || \'sun\'; }\nfunction MRT_status(text){ MRT_get(\'mrt_status\').textContent = text; }\nfunction MRT_print(obj){\n  try { MRT_get(\'mrt_result\').textContent = JSON.stringify(obj, null, 2); }\n  catch(e){ MRT_get(\'mrt_result\').textContent = String(obj); }\n}\nfunction MRT_loading(btn, loading){\n  if(!btn) return;\n  if(loading){ btn.dataset.oldText = btn.textContent; btn.textContent = \'Testing...\'; btn.disabled = true; }\n  else { btn.textContent = btn.dataset.oldText || btn.textContent; btn.disabled = false; }\n}\nasync function MRT_call(method, path, body, btn){\n  MRT_loading(btn, true);\n  MRT_status(\'Calling \' + method + \' \' + path);\n  try{\n    var options = { method: method, headers: { \'Content-Type\': \'application/json\' } };\n    if(body !== null && body !== undefined){ options.body = JSON.stringify(body); }\n\n    var res = await fetch(MRT_base() + path, options);\n    var text = await res.text();\n    var json;\n    try { json = text ? JSON.parse(text) : null; }\n    catch(e){ json = { raw_response: text }; }\n\n    MRT_status(\'WordPress HTTP \' + res.status + \' / Core HTTP \' + (json && json.http_code ? json.http_code : \'unknown\'));\n    MRT_print(json);\n\n    if(json && Number(json.http_code) === 401){\n      MRT_status(\'Core 回 401：請檢查 PHP 是否有帶 X-API-Key。\');\n    }\n\n    return json;\n  }catch(err){\n    MRT_status(\'Request failed: \' + err.message);\n    MRT_print({ ok:false, error:err.message });\n    return null;\n  }finally{\n    MRT_loading(btn, false);\n  }\n}\nasync function MRT_videos(btn){\n  var json = await MRT_call(\'GET\',\'/videos\',null,btn);\n  if(json && json.data && Array.isArray(json.data.videos) && json.data.videos.length){\n    var first = json.data.videos[0];\n    var uuid = first.uuid || first.video_uuid || first.video_id || \'\';\n    if(uuid){\n      MRT_get(\'mrt_uuid\').value = uuid;\n      MRT_status(\'videos OK，已自動填入第一個 uuid：\' + uuid);\n    }\n  }\n}\nfunction MRT_lookup(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'GET\',\'/lookup/\' + encodeURIComponent(MRT_uuid()),null,btn);\n}\nfunction MRT_process(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'POST\',\'/process/\' + encodeURIComponent(MRT_uuid()),{},btn);\n}\nfunction MRT_progress(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'GET\',\'/progress/\' + encodeURIComponent(MRT_uuid()),null,btn);\n}\nfunction MRT_search(btn){\n  return MRT_call(\'POST\',\'/search\',{ query:MRT_query(), limit:5 },btn);\n}\nfunction MRT_clear(){\n  MRT_status(\'Ready. 請先按 health，再按 videos。\');\n  MRT_get(\'mrt_result\').textContent = \'No response yet.\';\n}\n</script>\n\n<!-- /wp:html -->','Scan - test -SC','','trash','closed','closed','','scan-test-sc__trashed','','','2026-05-18 00:47:20','2026-05-18 00:47:20','',0,'https://wp.momentry.ddns.net/?page_id=1416',0,'page','',0),
(1417,1,'2026-05-02 12:03:02','2026-05-02 12:03:02','<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"zh-Hant\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Momentry API Test</title>\n  <style>\n    body { font-family: Arial, sans-serif; padding: 30px; }\n    button { padding: 10px 18px; cursor: pointer; }\n    pre { background: #f5f5f5; padding: 15px; white-space: pre-wrap; }\n  </style>\n</head>\n<body>\n\n  <h2>Momentry AI Core 測試頁</h2>\n\n  <button onclick=\"scanFiles()\">Scan Files</button>\n\n  <h3>Response</h3>\n  <pre id=\"result\">尚未執行</pre>\n\n  <script>\n    async function scanFiles() {\n      const resultBox = document.getElementById(\"result\");\n      resultBox.textContent = \"Loading...\";\n\n      try {\n        const res = await fetch(\"test-momentry.php?action=scan\");\n        const data = await res.json();\n\n        resultBox.textContent = JSON.stringify(data, null, 2);\n      } catch (err) {\n        resultBox.textContent = \"Error: \" + err.message;\n      }\n    }\n  </script>\n\n</body>\n</html>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:03:02','2026-05-02 12:03:02','',1416,'https://wp.momentry.ddns.net/?p=1417',0,'revision','',0),
(1418,1,'2026-05-02 12:05:58','2026-05-02 12:05:58','<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"zh-Hant\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Momentry API Test</title>\n  <style>\n    body { font-family: Arial, sans-serif; padding: 30px; }\n    button { padding: 10px 18px; cursor: pointer; }\n    pre { background: #f5f5f5; padding: 15px; white-space: pre-wrap; }\n  </style>\n</head>\n<body>\n\n  <h2>Momentry AI Core 測試頁</h2>\n\n  <button onclick=\"scanFiles()\">Scan Files</button>\n\n  <h3>Response</h3>\n  <pre id=\"result\">尚未執行</pre>\n\n <script>\nasync function scanFiles() {\n  const resultBox = document.getElementById(\"result\");\n  resultBox.textContent = \"Loading...\";\n\n  try {\n    const res = await fetch(\"test-momentry.php?action=scan\");\n    const text = await res.text();\n\n    resultBox.textContent =\n      \"HTTP Status: \" + res.status + \"\\n\\n\" +\n      \"Raw Response:\\n\" + text;\n\n  } catch (err) {\n    resultBox.textContent = \"Fetch Error: \" + err.message;\n  }\n}\n</script>\n\n</body>\n</html>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:05:58','2026-05-02 12:05:58','',1416,'https://wp.momentry.ddns.net/?p=1418',0,'revision','',0),
(1420,1,'2026-05-02 12:32:26','2026-05-02 12:32:26','<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"zh-Hant\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Momentry Demo Test</title>\n\n<style>\nbody { font-family: Arial; padding: 20px; }\nbutton { margin: 5px; padding: 8px 14px; cursor: pointer; }\n.card { border: 1px solid #ddd; padding: 10px; margin: 10px 0; }\npre { background: #f5f5f5; padding: 10px; }\n</style>\n\n</head>\n<body>\n\n<h2>Momentry Demo 控制台</h2>\n\n<button onclick=\"scan()\">Scan Files</button>\n\n<div id=\"list\"></div>\n\n<h3>Log</h3>\n<pre id=\"log\">Ready...</pre>\n\n<script>\n\nfunction log(data) {\n  document.getElementById(\"log\").textContent =\n    JSON.stringify(data, null, 2);\n}\n\n// 🔹 Scan\nasync function scan() {\n  const res = await fetch(\"/wp-json/momentry/v1/scan\");\n  const data = await res.json();\n\n  log(data);\n\n  const list = document.getElementById(\"list\");\n  list.innerHTML = \"\";\n\n  if (!data.data || !data.data.files) {\n    list.innerHTML = \"No files\";\n    return;\n  }\n\n  data.data.files.forEach(file => {\n\n    const div = document.createElement(\"div\");\n    div.className = \"card\";\n\n    div.innerHTML = `\n      <b>${file.file_name}</b><br>\n      UUID: ${file.file_uuid}<br>\n      Status: ${file.status}<br>\n      Registered: ${file.is_registered}<br>\n\n      <button onclick=\"registerFile(\'${file.file_path}\')\">Register</button>\n      <button onclick=\"probe(\'${file.file_uuid}\')\">Probe</button>\n      <button onclick=\"processFile(\'${file.file_uuid}\')\">Process</button>\n      <button onclick=\"progress(\'${file.file_uuid}\')\">Progress</button>\n      <button onclick=\"unregisterFile(\'${file.file_uuid}\')\">Unregister</button>\n    `;\n\n    list.appendChild(div);\n  });\n}\n\n// 🔹 Register\nasync function registerFile(path) {\n  const res = await fetch(\"/wp-json/momentry/v1/register\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({ file_path: path })\n  });\n\n  log(await res.json());\n}\n\n// 🔹 Probe\nasync function probe(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/probe/${uuid}`);\n  log(await res.json());\n}\n\n// 🔹 Process\nasync function processFile(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/process/${uuid}`, {\n    method: \"POST\"\n  });\n  log(await res.json());\n}\n\n// 🔹 Progress\nasync function progress(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/progress/${uuid}`);\n  log(await res.json());\n}\n\n// 🔹 Unregister\nasync function unregisterFile(uuid) {\n  const res = await fetch(\"/wp-json/momentry/v1/unregister\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({ uuid })\n  });\n  log(await res.json());\n}\n\n</script>\n\n</body>\n</html>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:32:26','2026-05-02 12:32:26','',1416,'https://wp.momentry.ddns.net/?p=1420',0,'revision','',0),
(1421,1,'2026-05-02 12:49:24','2026-05-02 12:49:24','<!-- wp:html -->\n<!DOCTYPE html>\n<html lang=\"zh-Hant\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Momentry Full Test</title>\n\n<style>\nbody { font-family: Arial; padding: 20px; }\nbutton { margin: 5px; padding: 6px 12px; cursor: pointer; }\n.card { border: 1px solid #ddd; padding: 10px; margin: 10px 0; }\npre { background: #f5f5f5; padding: 10px; }\n</style>\n\n</head>\n<body>\n\n<h2>Momentry 全功能測試</h2>\n\n<button onclick=\"scan()\">Scan</button>\n<button onclick=\"getIdentities()\">Identities</button>\n\n<div id=\"list\"></div>\n\n<h3>Log</h3>\n<pre id=\"log\">Ready...</pre>\n\n<script>\n\nfunction log(data) {\n  document.getElementById(\"log\").textContent =\n    JSON.stringify(data, null, 2);\n}\n\n// Scan\nasync function scan() {\n  const res = await fetch(\"/wp-json/momentry/v1/scan\");\n  const data = await res.json();\n\n  log(data);\n\n  const list = document.getElementById(\"list\");\n  list.innerHTML = \"\";\n\n  if (!data.data || !data.data.files) return;\n\n  data.data.files.forEach(file => {\n\n    const div = document.createElement(\"div\");\n    div.className = \"card\";\n\n    div.innerHTML = `\n      <b>${file.file_name}</b><br>\n      UUID: ${file.file_uuid}<br>\n      Status: ${file.status}<br>\n\n      <button onclick=\"registerFile(\'${file.file_path}\')\">Register</button>\n      <button onclick=\"probe(\'${file.file_uuid}\')\">Probe</button>\n      <button onclick=\"processFile(\'${file.file_uuid}\')\">Process</button>\n      <button onclick=\"progress(\'${file.file_uuid}\')\">Progress</button>\n      <button onclick=\"unregisterFile(\'${file.file_uuid}\')\">Unregister</button>\n      <button onclick=\"faces(\'${file.file_uuid}\')\">Faces</button>\n    `;\n\n    list.appendChild(div);\n  });\n}\n\n// Register\nasync function registerFile(path) {\n  const res = await fetch(\"/wp-json/momentry/v1/register\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({ file_path: path })\n  });\n  log(await res.json());\n}\n\n// Probe\nasync function probe(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/probe/${uuid}`);\n  log(await res.json());\n}\n\n// Process\nasync function processFile(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/process/${uuid}`, {\n    method: \"POST\"\n  });\n  log(await res.json());\n}\n\n// Progress\nasync function progress(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/progress/${uuid}`);\n  log(await res.json());\n}\n\n// Unregister\nasync function unregisterFile(uuid) {\n  const res = await fetch(\"/wp-json/momentry/v1/unregister\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({ uuid })\n  });\n  log(await res.json());\n}\n\n// Faces\nasync function faces(uuid) {\n  const res = await fetch(`/wp-json/momentry/v1/faces?file_uuid=${uuid}`);\n  log(await res.json());\n}\n\n// Identities\nasync function getIdentities() {\n  const res = await fetch(`/wp-json/momentry/v1/identities`);\n  log(await res.json());\n}\n\n// Bind（測試用固定值）\nasync function bindTest() {\n  const res = await fetch(\"/wp-json/momentry/v1/bind\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({\n      identity_id: 1,\n      binding_value: \"123_RoleA\"\n    })\n  });\n  log(await res.json());\n}\n\n</script>\n\n</body>\n</html>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:49:24','2026-05-02 12:49:24','',1416,'https://wp.momentry.ddns.net/?p=1421',0,'revision','',0),
(1422,1,'2026-05-02 12:53:31','2026-05-02 12:53:31','<!-- wp:html -->\n<!--\n  Momentry Demo Backend Processing UI\n  Paste into a WordPress HTML block or a custom page template.\n\n  IMPORTANT:\n  1) Do NOT put Core API Key in this HTML.\n  2) This page expects WordPress/PHP to provide one safe proxy endpoint.\n  3) Update API_PROXY below to match your PHP proxy.\n\n  Recommended PHP proxy shape:\n  POST /wp-admin/admin-ajax.php?action=momentry_core_proxy\n  Body: { \"method\":\"GET|POST\", \"path\":\"/api/v1/videos\", \"body\":{} }\n  PHP appends X-API-Key server-side and calls https://api.momentry.ddns.net + path\n-->\n\n<div id=\"momentry-admin-app\">\n  <style>\n    #momentry-admin-app{\n      --bg:#f5f7fb;\n      --panel:#ffffff;\n      --panel2:#f9fbff;\n      --text:#142033;\n      --muted:#6b7280;\n      --line:#e5eaf3;\n      --blue:#2563eb;\n      --blue2:#dbeafe;\n      --green:#16a34a;\n      --green2:#dcfce7;\n      --orange:#f97316;\n      --orange2:#ffedd5;\n      --red:#dc2626;\n      --red2:#fee2e2;\n      --shadow:0 18px 50px rgba(15, 23, 42, .08);\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",\"PingFang TC\",\"Microsoft JhengHei\",Arial,sans-serif;\n      color:var(--text);\n      background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 45%,#f7f7fb 100%);\n      border-radius:28px;\n      overflow:hidden;\n      min-height:760px;\n      border:1px solid rgba(226,232,240,.9);\n    }\n    #momentry-admin-app *{box-sizing:border-box}\n    .ma-shell{display:grid;grid-template-columns:260px 1fr;min-height:760px}\n    .ma-side{background:rgba(255,255,255,.72);backdrop-filter:blur(20px);border-right:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:18px}\n    .ma-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}\n    .ma-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#111827,#2563eb);box-shadow:0 12px 24px rgba(37,99,235,.22);position:relative}\n    .ma-logo:after{content:\"\";position:absolute;inset:11px;border:2px solid rgba(255,255,255,.8);border-radius:50%}\n    .ma-brand h2{margin:0;font-size:18px;letter-spacing:-.03em;line-height:1.05}\n    .ma-brand small{display:block;color:var(--muted);font-weight:500;margin-top:3px}\n    .ma-nav{display:flex;flex-direction:column;gap:8px;margin-top:4px}\n    .ma-nav button{appearance:none;border:0;background:transparent;text-align:left;padding:12px 13px;border-radius:15px;color:#334155;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.18s ease;font-size:14px}\n    .ma-nav button:hover{background:#eef4ff;color:#1d4ed8}\n    .ma-nav button.active{background:#e8f0ff;color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.12)}\n    .ma-dot{width:9px;height:9px;border-radius:999px;background:#cbd5e1}\n    .ma-nav button.active .ma-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}\n    .ma-side-card{margin-top:auto;background:#0f172a;color:white;border-radius:22px;padding:18px;box-shadow:var(--shadow)}\n    .ma-side-card b{display:block;font-size:14px;margin-bottom:8px}\n    .ma-side-card p{margin:0;color:#cbd5e1;font-size:12px;line-height:1.5}\n    .ma-main{padding:28px;min-width:0}\n    .ma-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}\n    .ma-title h1{font-size:30px;letter-spacing:-.05em;margin:0 0 8px}\n    .ma-title p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}\n    .ma-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}\n    .ma-btn{appearance:none;border:1px solid var(--line);background:white;border-radius:14px;padding:10px 14px;font-weight:800;color:#263244;cursor:pointer;transition:.18s ease;box-shadow:0 8px 18px rgba(15,23,42,.04);font-size:13px}\n    .ma-btn:hover{transform:translateY(-1px);border-color:#bfdbfe;color:#1d4ed8}\n    .ma-btn.primary{background:#2563eb;color:white;border-color:#2563eb}\n    .ma-btn.primary:hover{background:#1d4ed8;color:white}\n    .ma-btn.danger{background:#fff;border-color:#fecaca;color:#b91c1c}\n    .ma-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}\n    .ma-stat{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);min-height:110px}\n    .ma-stat label{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}\n    .ma-stat strong{font-size:28px;letter-spacing:-.05em}\n    .ma-stat span{display:block;margin-top:8px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n    .ma-section{display:none}\n    .ma-section.active{display:block}\n    .ma-card{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}\n    .ma-card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center;background:rgba(255,255,255,.72)}\n    .ma-card-head h3{margin:0;font-size:16px;letter-spacing:-.02em}\n    .ma-card-head p{margin:4px 0 0;color:var(--muted);font-size:12px}\n    .ma-card-body{padding:20px}\n    .ma-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n    .ma-field{display:flex;flex-direction:column;gap:7px}\n    .ma-field.full{grid-column:1/-1}\n    .ma-field label{font-size:12px;color:#475569;font-weight:800}\n    .ma-input,.ma-select,.ma-textarea{width:100%;border:1px solid #dbe3ef;background:#fff;border-radius:14px;padding:11px 12px;font:inherit;font-size:13px;color:var(--text);outline:none;transition:.16s ease}\n    .ma-input:focus,.ma-select:focus,.ma-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.1)}\n    .ma-textarea{min-height:96px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n    .ma-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\n    .ma-list{display:flex;flex-direction:column;gap:10px}\n    .ma-video{border:1px solid var(--line);border-radius:18px;padding:14px;background:linear-gradient(180deg,#fff,#f8fbff);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}\n    .ma-video h4{margin:0 0 6px;font-size:14px;line-height:1.35;word-break:break-word}\n    .ma-video p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;word-break:break-word}\n    .ma-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#f1f5f9;color:#334155;white-space:nowrap}\n    .ma-pill.ok{background:var(--green2);color:#166534}.ma-pill.err{background:var(--red2);color:#991b1b}.ma-pill.warn{background:var(--orange2);color:#9a3412}.ma-pill.blue{background:var(--blue2);color:#1e40af}\n    .ma-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:white}\n    .ma-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}\n    .ma-table th,.ma-table td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    .ma-table th{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#f8fafc}\n    .ma-table tr:last-child td{border-bottom:0}\n    .ma-log{background:#0b1020;color:#d7e0ff;border-radius:20px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto}\n    .ma-empty{border:1px dashed #cbd5e1;border-radius:20px;padding:28px;text-align:center;color:var(--muted);background:#fbfdff}\n    .ma-progress{height:10px;background:#e5eaf3;border-radius:999px;overflow:hidden;margin-top:10px}\n    .ma-progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#22c55e);transition:.3s ease}\n    .ma-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}\n    .ma-api-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-height:128px}\n    .ma-api-card b{font-size:13px}.ma-api-card code{font-size:11px;color:#64748b;word-break:break-all}.ma-api-card .ma-btn{margin-top:auto;width:100%}\n    .ma-split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}\n    .ma-toast{position:fixed;right:24px;bottom:24px;z-index:99999;background:#0f172a;color:white;padding:13px 15px;border-radius:16px;box-shadow:0 20px 40px rgba(15,23,42,.22);display:none;font-weight:700;font-size:13px;max-width:360px}\n    @media(max-width:1050px){.ma-shell{grid-template-columns:1fr}.ma-side{position:relative}.ma-grid,.ma-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-split{grid-template-columns:1fr}.ma-top{flex-direction:column}.ma-actions{justify-content:flex-start}}\n    @media(max-width:640px){#momentry-admin-app{border-radius:18px}.ma-main{padding:18px}.ma-grid,.ma-quick,.ma-form{grid-template-columns:1fr}.ma-video{grid-template-columns:1fr}.ma-title h1{font-size:24px}}\n  </style>\n\n  <div class=\"ma-shell\">\n    <aside class=\"ma-side\">\n      <div class=\"ma-brand\">\n        <div class=\"ma-logo\"></div>\n        <div>\n          <h2>Momentry</h2>\n          <small>Demo Backend Console</small>\n        </div>\n      </div>\n      <nav class=\"ma-nav\">\n        <button class=\"active\" data-tab=\"overview\"><span class=\"ma-dot\"></span>總覽 Dashboard</button>\n        <button data-tab=\"processing\"><span class=\"ma-dot\"></span>資料處理</button>\n        <button data-tab=\"videos\"><span class=\"ma-dot\"></span>影片清單</button>\n        <button data-tab=\"tools\"><span class=\"ma-dot\"></span>API 測試工具</button>\n        <button data-tab=\"logs\"><span class=\"ma-dot\"></span>Raw Response</button>\n      </nav>\n      <div class=\"ma-side-card\">\n        <b>安全提醒</b>\n        <p>這份 HTML 不放 API Key。請讓 PHP proxy 在 server 端補上 X-API-Key，再轉呼叫 Core。</p>\n      </div>\n    </aside>\n\n    <main class=\"ma-main\">\n      <div class=\"ma-top\">\n        <div class=\"ma-title\">\n          <h1>Demo 後台資料處理</h1>\n          <p>用來檢查 Core 狀態、掃描檔案、啟動素材處理、追蹤進度，並快速測試 Demo 前的資料是否準備好。</p>\n        </div>\n        <div class=\"ma-actions\">\n          <button class=\"ma-btn\" id=\"maBtnHealth\">檢查 Core</button>\n          <button class=\"ma-btn\" id=\"maBtnVideos\">更新影片清單</button>\n          <button class=\"ma-btn primary\" id=\"maBtnScan\">掃描檔案</button>\n        </div>\n      </div>\n\n      <section class=\"ma-section active\" id=\"ma-tab-overview\">\n        <div class=\"ma-grid\">\n          <div class=\"ma-stat\"><label>Core Status</label><strong id=\"maStatHealth\">—</strong><span id=\"maStatHealthSub\">尚未檢查</span></div>\n          <div class=\"ma-stat\"><label>Videos</label><strong id=\"maStatVideos\">0</strong><span id=\"maStatVideosSub\">尚未載入</span></div>\n          <div class=\"ma-stat\"><label>Last HTTP</label><strong id=\"maStatHttp\">—</strong><span id=\"maStatHttpSub\">等待 API 回應</span></div>\n          <div class=\"ma-stat\"><label>Progress</label><strong id=\"maStatProgress\">—</strong><span id=\"maStatProgressSub\">可輸入 UUID 查詢</span></div>\n        </div>\n\n        <div class=\"ma-split\">\n          <div class=\"ma-card\">\n            <div class=\"ma-card-head\">\n              <div><h3>Demo Readiness</h3><p>建議 Demo 前依序確認這四件事。</p></div>\n            </div>\n            <div class=\"ma-card-body\">\n              <div class=\"ma-list\" id=\"maChecklist\"></div>\n            </div>\n          </div>\n\n          <div class=\"ma-card\">\n            <div class=\"ma-card-head\">\n              <div><h3>Current Target</h3><p>目前操作用的影片 UUID / 任務 UUID。</p></div>\n            </div>\n            <div class=\"ma-card-body\">\n              <div class=\"ma-field\">\n                <label>UUID</label>\n                <input class=\"ma-input\" id=\"maUuid\" placeholder=\"貼上 video_uuid / asset uuid\" value=\"384b0ff44aaaa1f1\" />\n              </div>\n              <div class=\"ma-row\" style=\"margin-top:12px\">\n                <button class=\"ma-btn\" id=\"maBtnLookup\">Lookup</button>\n                <button class=\"ma-btn\" id=\"maBtnProcess\">Process</button>\n                <button class=\"ma-btn\" id=\"maBtnProgress\">Progress</button>\n              </div>\n              <div class=\"ma-progress\"><span id=\"maProgressBar\"></span></div>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-processing\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>資料處理控制台</h3><p>掃描素材、指定 UUID 觸發處理、查詢處理進度。</p></div>\n            <span class=\"ma-pill blue\">Core Proxy Mode</span>\n          </div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-form\">\n              <div class=\"ma-field\">\n                <label>API Proxy Endpoint</label>\n                <input class=\"ma-input\" id=\"maProxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" />\n              </div>\n              <div class=\"ma-field\">\n                <label>Request Timeout</label>\n                <select class=\"ma-select\" id=\"maTimeout\">\n                  <option value=\"8000\">8 秒</option>\n                  <option value=\"15000\" selected>15 秒</option>\n                  <option value=\"30000\">30 秒</option>\n                </select>\n              </div>\n              <div class=\"ma-field full\">\n                <label>Process Body JSON，可先留空</label>\n                <textarea class=\"ma-textarea\" id=\"maProcessBody\">{}</textarea>\n              </div>\n            </div>\n            <div class=\"ma-row\" style=\"margin-top:14px\">\n              <button class=\"ma-btn primary\" id=\"maBtnScan2\">GET /api/v1/files/scan</button>\n              <button class=\"ma-btn\" id=\"maBtnProcess2\">POST /api/v1/assets/:uuid/process</button>\n              <button class=\"ma-btn\" id=\"maBtnProgress2\">GET /api/v1/progress/:uuid</button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\"><div><h3>最近任務 / 狀態</h3><p>這裡會顯示最近一次 scan、process、progress 的結果摘要。</p></div></div>\n          <div class=\"ma-card-body\" id=\"maJobSummary\"><div class=\"ma-empty\">尚未執行任何資料處理 API。</div></div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-videos\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>影片清單</h3><p>呼叫 GET /api/v1/videos，確認目前 Core 已註冊的影片。</p></div>\n            <button class=\"ma-btn primary\" id=\"maBtnVideos2\">重新載入</button>\n          </div>\n          <div class=\"ma-card-body\" id=\"maVideoList\"><div class=\"ma-empty\">尚未載入影片。</div></div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-tools\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>快速 API 測試</h3><p>保留八個 Demo 常用測試入口。需要 PHP proxy 支援 method/path/body。</p></div>\n          </div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-quick\" id=\"maApiCards\"></div>\n          </div>\n        </div>\n\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\"><div><h3>自訂 API Call</h3><p>當 Core 新增 endpoint 時，可直接在這裡測試。</p></div></div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-form\">\n              <div class=\"ma-field\"><label>Method</label><select class=\"ma-select\" id=\"maCustomMethod\"><option>GET</option><option>POST</option><option>PATCH</option><option>DELETE</option></select></div>\n              <div class=\"ma-field\"><label>Path</label><input class=\"ma-input\" id=\"maCustomPath\" value=\"/health\" /></div>\n              <div class=\"ma-field full\"><label>Body JSON</label><textarea class=\"ma-textarea\" id=\"maCustomBody\">{}</textarea></div>\n            </div>\n            <div class=\"ma-row\" style=\"margin-top:14px\"><button class=\"ma-btn primary\" id=\"maBtnCustom\">送出自訂 API</button></div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-logs\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>Raw Response</h3><p>所有 API 回應會顯示在這裡，方便截圖給 Warren / Lynn / Wendy 對照。</p></div>\n            <button class=\"ma-btn danger\" id=\"maBtnClearLog\">清空</button>\n          </div>\n          <div class=\"ma-card-body\"><div class=\"ma-log\" id=\"maLog\">Ready.</div></div>\n        </div>\n      </section>\n    </main>\n  </div>\n  <div class=\"ma-toast\" id=\"maToast\"></div>\n\n  <script>\n  (function(){\n    \'use strict\';\n\n    var state = {\n      health:false,\n      videos:[],\n      lastHttp:\'—\',\n      lastData:null,\n      progress:null\n    };\n\n    var QUICK_APIS = [\n      {name:\'Health\', method:\'GET\', path:\'/health\', body:null},\n      {name:\'Videos\', method:\'GET\', path:\'/api/v1/videos\', body:null},\n      {name:\'Lookup\', method:\'GET\', path:function(){return \'/api/v1/lookup?uuid=\' + enc(uuid());}, body:null},\n      {name:\'Files Scan\', method:\'GET\', path:\'/api/v1/files/scan\', body:null},\n      {name:\'Asset Process\', method:\'POST\', path:function(){return \'/api/v1/assets/\' + enc(uuid()) + \'/process\';}, body:{}},\n      {name:\'Progress\', method:\'GET\', path:function(){return \'/api/v1/progress/\' + enc(uuid());}, body:null},\n      {name:\'Search Test\', method:\'POST\', path:\'/api/v1/n8n/search\', body:{query:\'sun\',limit:3}},\n      {name:\'Person Status\', method:\'GET\', path:\'/api/v1/people/status\', body:null}\n    ];\n\n    function $(id){ return document.getElementById(id); }\n    function enc(v){ return encodeURIComponent(v || \'\'); }\n    function uuid(){ return ($(\'maUuid\').value || \'\').trim(); }\n    function proxy(){ return ($(\'maProxy\').value || \'/wp-admin/admin-ajax.php?action=momentry_core_proxy\').trim(); }\n    function esc(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\n    function pretty(obj){ try{return JSON.stringify(obj,null,2);}catch(e){return String(obj);} }\n    function now(){ return new Date().toLocaleString(\'zh-TW\',{hour12:false}); }\n\n    function toast(msg){\n      var t=$(\'maToast\');\n      t.textContent=msg;\n      t.style.display=\'block\';\n      clearTimeout(toast._timer);\n      toast._timer=setTimeout(function(){t.style.display=\'none\';},2600);\n    }\n\n    function log(title, data){\n      var box=$(\'maLog\');\n      var prev=box.textContent === \'Ready.\' ? \'\' : box.textContent + \'\\n\\n\';\n      box.textContent = prev + \'[\' + now() + \'] \' + title + \'\\n\' + pretty(data);\n      box.scrollTop = box.scrollHeight;\n    }\n\n    function setLoading(btn, isLoading){\n      if(!btn) return;\n      if(isLoading){ btn.dataset.oldText = btn.textContent; btn.textContent = \'執行中…\'; btn.disabled = true; }\n      else { btn.textContent = btn.dataset.oldText || btn.textContent; btn.disabled = false; }\n    }\n\n    function parseBody(id){\n      var txt = ($(id).value || \'\').trim();\n      if(!txt) return {};\n      try{return JSON.parse(txt);}catch(e){throw new Error(\'Body JSON 格式錯誤：\' + e.message);}\n    }\n\n    function normalizeProxyResponse(raw){\n      // Supports both shapes:\n      // 1) proxy returns {ok:true,http_code:200,data:{...}}\n      // 2) proxy directly returns Core JSON\n      if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw)){\n        return raw;\n      }\n      return {ok:true,http_code:200,data:raw};\n    }\n\n    async function coreCall(method, path, body, btn){\n      setLoading(btn,true);\n      var start = performance.now();\n      try{\n        var controller = new AbortController();\n        var timeoutMs = Number($(\'maTimeout\').value || 15000);\n        var timer = setTimeout(function(){ controller.abort(); }, timeoutMs);\n        var payload = { method: method, path: path };\n        if(body !== null && body !== undefined) payload.body = body;\n\n        var res = await fetch(proxy(), {\n          method:\'POST\',\n          headers:{\'Content-Type\':\'application/json\'},\n          body:JSON.stringify(payload),\n          signal:controller.signal\n        });\n        clearTimeout(timer);\n\n        var text = await res.text();\n        var json;\n        try{ json = text ? JSON.parse(text) : null; }catch(e){ json = {raw_response:text}; }\n        var wrapped = normalizeProxyResponse(json);\n        var ms = Math.round(performance.now() - start);\n\n        state.lastHttp = String(wrapped.http_code || res.status || \'—\');\n        state.lastData = wrapped;\n        $(\'maStatHttp\').textContent = state.lastHttp;\n        $(\'maStatHttpSub\').textContent = ms + \' ms · \' + method + \' \' + path;\n        log(method + \' \' + path, wrapped);\n        updateChecklist();\n\n        if(!res.ok || wrapped.ok === false || Number(wrapped.http_code || 200) >= 400){\n          toast(\'API 回傳錯誤：HTTP \' + (wrapped.http_code || res.status));\n        }else{\n          toast(\'API 成功：\' + method + \' \' + path);\n        }\n        return wrapped;\n      }catch(err){\n        var errorObj = {ok:false,error:err.name === \'AbortError\' ? \'TIMEOUT\' : err.message, method:method, path:path};\n        state.lastHttp = err.name === \'AbortError\' ? \'timeout\' : \'error\';\n        $(\'maStatHttp\').textContent = state.lastHttp;\n        $(\'maStatHttpSub\').textContent = method + \' \' + path;\n        log(method + \' \' + path, errorObj);\n        toast(errorObj.error);\n        return errorObj;\n      }finally{\n        setLoading(btn,false);\n      }\n    }\n\n    async function checkHealth(btn){\n      var r = await coreCall(\'GET\',\'/health\',null,btn);\n      var ok = r && (r.ok === true || r.data || Number(r.http_code) === 200);\n      state.health = !!ok;\n      $(\'maStatHealth\').textContent = ok ? \'OK\' : \'FAIL\';\n      $(\'maStatHealthSub\').textContent = ok ? \'Core 可連線\' : \'Core 未通或 proxy 未通\';\n      updateChecklist();\n    }\n\n    async function loadVideos(btn){\n      var r = await coreCall(\'GET\',\'/api/v1/videos\',null,btn);\n      var data = r && (r.data || r);\n      var videos = [];\n      if(data && Array.isArray(data.videos)) videos = data.videos;\n      if(data && Array.isArray(data.data && data.data.videos)) videos = data.data.videos;\n      state.videos = videos;\n      $(\'maStatVideos\').textContent = String(videos.length || 0);\n      $(\'maStatVideosSub\').textContent = videos.length ? \'已載入影片清單\' : \'沒有影片或格式不同\';\n      renderVideos(videos);\n      updateChecklist();\n    }\n\n    function renderVideos(videos){\n      var el=$(\'maVideoList\');\n      if(!videos || !videos.length){ el.innerHTML=\'<div class=\"ma-empty\">沒有影片資料。請確認 Core 是否已有註冊影片。</div>\'; return; }\n      el.innerHTML = \'<div class=\"ma-list\">\' + videos.map(function(v){\n        var id = v.uuid || v.video_uuid || v.video_id || \'\';\n        return \'<div class=\"ma-video\">\' +\n          \'<div><h4>\' + esc(v.file_name || v.title || id || \'Untitled Video\') + \'</h4>\' +\n          \'<p>UUID: \' + esc(id) + \'<br>Duration: \' + esc(v.duration || v.durationSec || \'—\') + \' sec · Size: \' + esc(v.size || v.sizeKB || \'—\') + \'</p></div>\' +\n          \'<div class=\"ma-row\"><button class=\"ma-btn\" data-use-uuid=\"\' + esc(id) + \'\">使用 UUID</button><button class=\"ma-btn\" data-process-uuid=\"\' + esc(id) + \'\">處理</button></div>\' +\n        \'</div>\';\n      }).join(\'\') + \'</div>\';\n    }\n\n    async function lookup(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      await coreCall(\'GET\',\'/api/v1/lookup?uuid=\' + enc(uuid()),null,btn);\n    }\n\n    async function scan(btn){\n      var r = await coreCall(\'GET\',\'/api/v1/files/scan\',null,btn);\n      renderJobSummary(\'Files Scan\', r);\n    }\n\n    async function processAsset(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      var body;\n      try{ body = parseBody(\'maProcessBody\'); }catch(e){ return toast(e.message); }\n      var r = await coreCall(\'POST\',\'/api/v1/assets/\' + enc(uuid()) + \'/process\', body, btn);\n      renderJobSummary(\'Asset Process\', r);\n    }\n\n    async function progress(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      var r = await coreCall(\'GET\',\'/api/v1/progress/\' + enc(uuid()),null,btn);\n      var data = r && (r.data || r);\n      var p = Number(data && (data.progress || data.percent || data.progress_percent || 0));\n      if(!isFinite(p)) p = 0;\n      p = Math.max(0,Math.min(100,p));\n      state.progress = p;\n      $(\'maStatProgress\').textContent = p ? p + \'%\' : (data && data.status ? data.status : \'—\');\n      $(\'maStatProgressSub\').textContent = data && data.status ? data.status : \'progress response received\';\n      $(\'maProgressBar\').style.width = p + \'%\';\n      renderJobSummary(\'Progress\', r);\n      updateChecklist();\n    }\n\n    function renderJobSummary(title, r){\n      var data = r && (r.data || r);\n      var status = (data && (data.status || data.message || data.error_code)) || (r && r.ok ? \'ok\' : \'unknown\');\n      var http = r && (r.http_code || \'—\');\n      $(\'maJobSummary\').innerHTML =\n        \'<div class=\"ma-table-wrap\"><table class=\"ma-table\"><thead><tr><th>Item</th><th>Value</th></tr></thead><tbody>\' +\n        \'<tr><td>Action</td><td>\' + esc(title) + \'</td></tr>\' +\n        \'<tr><td>HTTP</td><td>\' + esc(http) + \'</td></tr>\' +\n        \'<tr><td>Status</td><td>\' + esc(status) + \'</td></tr>\' +\n        \'<tr><td>UUID</td><td>\' + esc(uuid() || \'—\') + \'</td></tr>\' +\n        \'<tr><td>Updated</td><td>\' + esc(now()) + \'</td></tr>\' +\n        \'</tbody></table></div>\';\n    }\n\n    function renderChecklist(){\n      $(\'maChecklist\').innerHTML = [\n        {key:\'Core 連線\', desc:\'GET /health 有回應\', ok:function(){return state.health;}},\n        {key:\'影片清單\', desc:\'GET /api/v1/videos 至少有一支影片\', ok:function(){return state.videos.length > 0;}},\n        {key:\'資料處理\', desc:\'已執行 scan / process / progress 任一 API\', ok:function(){return !!state.lastData;}},\n        {key:\'進度狀態\', desc:\'progress API 有回傳進度或狀態\', ok:function(){return state.progress !== null;}}\n      ].map(function(i){\n        var good = i.ok();\n        return \'<div class=\"ma-video\"><div><h4>\' + esc(i.key) + \'</h4><p>\' + esc(i.desc) + \'</p></div><span class=\"ma-pill \' + (good?\'ok\':\'warn\') + \'\">\' + (good?\'Ready\':\'Pending\') + \'</span></div>\';\n      }).join(\'\');\n    }\n    function updateChecklist(){ renderChecklist(); }\n\n    function renderQuickApis(){\n      $(\'maApiCards\').innerHTML = QUICK_APIS.map(function(a,idx){\n        var p = typeof a.path === \'function\' ? a.path() : a.path;\n        return \'<div class=\"ma-api-card\"><b>\' + esc(a.name) + \'</b><code>\' + esc(a.method + \' \' + p) + \'</code><button class=\"ma-btn\" data-api-idx=\"\' + idx + \'\">Run</button></div>\';\n      }).join(\'\');\n    }\n\n    function bind(){\n      document.querySelectorAll(\'#momentry-admin-app .ma-nav button\').forEach(function(btn){\n        btn.addEventListener(\'click\',function(){\n          document.querySelectorAll(\'#momentry-admin-app .ma-nav button\').forEach(function(b){b.classList.remove(\'active\');});\n          document.querySelectorAll(\'#momentry-admin-app .ma-section\').forEach(function(s){s.classList.remove(\'active\');});\n          btn.classList.add(\'active\');\n          $(\'ma-tab-\' + btn.dataset.tab).classList.add(\'active\');\n        });\n      });\n\n      $(\'maBtnHealth\').onclick=function(){checkHealth(this)};\n      $(\'maBtnVideos\').onclick=function(){loadVideos(this)};\n      $(\'maBtnVideos2\').onclick=function(){loadVideos(this)};\n      $(\'maBtnScan\').onclick=function(){scan(this)};\n      $(\'maBtnScan2\').onclick=function(){scan(this)};\n      $(\'maBtnLookup\').onclick=function(){lookup(this)};\n      $(\'maBtnProcess\').onclick=function(){processAsset(this)};\n      $(\'maBtnProcess2\').onclick=function(){processAsset(this)};\n      $(\'maBtnProgress\').onclick=function(){progress(this)};\n      $(\'maBtnProgress2\').onclick=function(){progress(this)};\n      $(\'maBtnClearLog\').onclick=function(){$(\'maLog\').textContent=\'Ready.\';};\n      $(\'maBtnCustom\').onclick=async function(){\n        var method=$(\'maCustomMethod\').value;\n        var path=$(\'maCustomPath\').value.trim();\n        var body=null;\n        if(method !== \'GET\'){\n          try{ body=parseBody(\'maCustomBody\'); }catch(e){ return toast(e.message); }\n        }\n        await coreCall(method,path,body,this);\n      };\n\n      $(\'maVideoList\').addEventListener(\'click\',function(e){\n        var use = e.target.getAttribute(\'data-use-uuid\');\n        var proc = e.target.getAttribute(\'data-process-uuid\');\n        if(use){ $(\'maUuid\').value = use; toast(\'已套用 UUID\'); renderQuickApis(); }\n        if(proc){ $(\'maUuid\').value = proc; processAsset(e.target); renderQuickApis(); }\n      });\n\n      $(\'maApiCards\').addEventListener(\'click\',async function(e){\n        var idx = e.target.getAttribute(\'data-api-idx\');\n        if(idx == null) return;\n        var a = QUICK_APIS[Number(idx)];\n        var path = typeof a.path === \'function\' ? a.path() : a.path;\n        await coreCall(a.method,path,a.body,e.target);\n        renderQuickApis();\n      });\n\n      $(\'maUuid\').addEventListener(\'input\',renderQuickApis);\n    }\n\n    renderChecklist();\n    renderQuickApis();\n    bind();\n  })();\n  </script>\n</div>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:53:31','2026-05-02 12:53:31','',1416,'https://wp.momentry.ddns.net/?p=1422',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1423,1,'2026-05-02 12:55:37','2026-05-02 12:55:37','<!-- wp:html -->\n<!--\n  Momentry Demo Backend Processing UI\n  Paste into a WordPress HTML block or a custom page template.\n\n  IMPORTANT:\n  1) Do NOT put Core API Key in this HTML.\n  2) This page expects WordPress/PHP to provide one safe proxy endpoint.\n  3) Update API_PROXY below to match your PHP proxy.\n\n  Recommended PHP proxy shape:\n  POST /wp-admin/admin-ajax.php?action=momentry_core_proxy\n  Body: { \"method\":\"GET|POST\", \"path\":\"/api/v1/videos\", \"body\":{} }\n  PHP appends X-API-Key server-side and calls https://api.momentry.ddns.net + path\n-->\n\n<div id=\"momentry-admin-app\">\n  <style>\n    #momentry-admin-app{\n      --bg:#f5f7fb;\n      --panel:#ffffff;\n      --panel2:#f9fbff;\n      --text:#142033;\n      --muted:#6b7280;\n      --line:#e5eaf3;\n      --blue:#2563eb;\n      --blue2:#dbeafe;\n      --green:#16a34a;\n      --green2:#dcfce7;\n      --orange:#f97316;\n      --orange2:#ffedd5;\n      --red:#dc2626;\n      --red2:#fee2e2;\n      --shadow:0 18px 50px rgba(15, 23, 42, .08);\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",\"PingFang TC\",\"Microsoft JhengHei\",Arial,sans-serif;\n      color:var(--text);\n      background:linear-gradient(135deg,#f8fbff 0%,#eef4ff 45%,#f7f7fb 100%);\n      border-radius:28px;\n      overflow:hidden;\n      min-height:760px;\n      border:1px solid rgba(226,232,240,.9);\n    }\n    #momentry-admin-app *{box-sizing:border-box}\n    .ma-shell{display:grid;grid-template-columns:260px 1fr;min-height:760px}\n    .ma-side{background:rgba(255,255,255,.72);backdrop-filter:blur(20px);border-right:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:18px}\n    .ma-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}\n    .ma-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#111827,#2563eb);box-shadow:0 12px 24px rgba(37,99,235,.22);position:relative}\n    .ma-logo:after{content:\"\";position:absolute;inset:11px;border:2px solid rgba(255,255,255,.8);border-radius:50%}\n    .ma-brand h2{margin:0;font-size:18px;letter-spacing:-.03em;line-height:1.05}\n    .ma-brand small{display:block;color:var(--muted);font-weight:500;margin-top:3px}\n    .ma-nav{display:flex;flex-direction:column;gap:8px;margin-top:4px}\n    .ma-nav button{appearance:none;border:0;background:transparent;text-align:left;padding:12px 13px;border-radius:15px;color:#334155;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.18s ease;font-size:14px}\n    .ma-nav button:hover{background:#eef4ff;color:#1d4ed8}\n    .ma-nav button.active{background:#e8f0ff;color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.12)}\n    .ma-dot{width:9px;height:9px;border-radius:999px;background:#cbd5e1}\n    .ma-nav button.active .ma-dot{background:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}\n    .ma-side-card{margin-top:auto;background:#0f172a;color:white;border-radius:22px;padding:18px;box-shadow:var(--shadow)}\n    .ma-side-card b{display:block;font-size:14px;margin-bottom:8px}\n    .ma-side-card p{margin:0;color:#cbd5e1;font-size:12px;line-height:1.5}\n    .ma-main{padding:28px;min-width:0}\n    .ma-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:24px}\n    .ma-title h1{font-size:30px;letter-spacing:-.05em;margin:0 0 8px}\n    .ma-title p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}\n    .ma-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}\n    .ma-btn{appearance:none;border:1px solid var(--line);background:white;border-radius:14px;padding:10px 14px;font-weight:800;color:#263244;cursor:pointer;transition:.18s ease;box-shadow:0 8px 18px rgba(15,23,42,.04);font-size:13px}\n    .ma-btn:hover{transform:translateY(-1px);border-color:#bfdbfe;color:#1d4ed8}\n    .ma-btn.primary{background:#2563eb;color:white;border-color:#2563eb}\n    .ma-btn.primary:hover{background:#1d4ed8;color:white}\n    .ma-btn.danger{background:#fff;border-color:#fecaca;color:#b91c1c}\n    .ma-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}\n    .ma-stat{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);min-height:110px}\n    .ma-stat label{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}\n    .ma-stat strong{font-size:28px;letter-spacing:-.05em}\n    .ma-stat span{display:block;margin-top:8px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n    .ma-section{display:none}\n    .ma-section.active{display:block}\n    .ma-card{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}\n    .ma-card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center;background:rgba(255,255,255,.72)}\n    .ma-card-head h3{margin:0;font-size:16px;letter-spacing:-.02em}\n    .ma-card-head p{margin:4px 0 0;color:var(--muted);font-size:12px}\n    .ma-card-body{padding:20px}\n    .ma-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n    .ma-field{display:flex;flex-direction:column;gap:7px}\n    .ma-field.full{grid-column:1/-1}\n    .ma-field label{font-size:12px;color:#475569;font-weight:800}\n    .ma-input,.ma-select,.ma-textarea{width:100%;border:1px solid #dbe3ef;background:#fff;border-radius:14px;padding:11px 12px;font:inherit;font-size:13px;color:var(--text);outline:none;transition:.16s ease}\n    .ma-input:focus,.ma-select:focus,.ma-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.1)}\n    .ma-textarea{min-height:96px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n    .ma-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\n    .ma-list{display:flex;flex-direction:column;gap:10px}\n    .ma-video{border:1px solid var(--line);border-radius:18px;padding:14px;background:linear-gradient(180deg,#fff,#f8fbff);display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}\n    .ma-video h4{margin:0 0 6px;font-size:14px;line-height:1.35;word-break:break-word}\n    .ma-video p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;word-break:break-word}\n    .ma-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#f1f5f9;color:#334155;white-space:nowrap}\n    .ma-pill.ok{background:var(--green2);color:#166534}.ma-pill.err{background:var(--red2);color:#991b1b}.ma-pill.warn{background:var(--orange2);color:#9a3412}.ma-pill.blue{background:var(--blue2);color:#1e40af}\n    .ma-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:white}\n    .ma-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}\n    .ma-table th,.ma-table td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    .ma-table th{color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#f8fafc}\n    .ma-table tr:last-child td{border-bottom:0}\n    .ma-log{background:#0b1020;color:#d7e0ff;border-radius:20px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto}\n    .ma-empty{border:1px dashed #cbd5e1;border-radius:20px;padding:28px;text-align:center;color:var(--muted);background:#fbfdff}\n    .ma-progress{height:10px;background:#e5eaf3;border-radius:999px;overflow:hidden;margin-top:10px}\n    .ma-progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#22c55e);transition:.3s ease}\n    .ma-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}\n    .ma-api-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;min-height:128px}\n    .ma-api-card b{font-size:13px}.ma-api-card code{font-size:11px;color:#64748b;word-break:break-all}.ma-api-card .ma-btn{margin-top:auto;width:100%}\n    .ma-split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}\n    .ma-toast{position:fixed;right:24px;bottom:24px;z-index:99999;background:#0f172a;color:white;padding:13px 15px;border-radius:16px;box-shadow:0 20px 40px rgba(15,23,42,.22);display:none;font-weight:700;font-size:13px;max-width:360px}\n    @media(max-width:1050px){.ma-shell{grid-template-columns:1fr}.ma-side{position:relative}.ma-grid,.ma-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.ma-split{grid-template-columns:1fr}.ma-top{flex-direction:column}.ma-actions{justify-content:flex-start}}\n    @media(max-width:640px){#momentry-admin-app{border-radius:18px}.ma-main{padding:18px}.ma-grid,.ma-quick,.ma-form{grid-template-columns:1fr}.ma-video{grid-template-columns:1fr}.ma-title h1{font-size:24px}}\n  </style>\n\n  <div class=\"ma-shell\">\n    <aside class=\"ma-side\">\n      <div class=\"ma-brand\">\n        <div class=\"ma-logo\"></div>\n        <div>\n          <h2>Momentry</h2>\n          <small>Demo Backend Console</small>\n        </div>\n      </div>\n      <nav class=\"ma-nav\">\n        <button class=\"active\" data-tab=\"overview\"><span class=\"ma-dot\"></span>總覽 Dashboard</button>\n        <button data-tab=\"processing\"><span class=\"ma-dot\"></span>資料處理</button>\n        <button data-tab=\"videos\"><span class=\"ma-dot\"></span>影片清單</button>\n        <button data-tab=\"tools\"><span class=\"ma-dot\"></span>API 測試工具</button>\n        <button data-tab=\"contract\"><span class=\"ma-dot\"></span>Contract 檢查</button>\n        <button data-tab=\"logs\"><span class=\"ma-dot\"></span>Raw Response</button>\n      </nav>\n      <div class=\"ma-side-card\">\n        <b>安全提醒</b>\n        <p>這份 HTML 不放 API Key。請讓 PHP proxy 在 server 端補上 X-API-Key，再轉呼叫 Core。</p>\n      </div>\n    </aside>\n\n    <main class=\"ma-main\">\n      <div class=\"ma-top\">\n        <div class=\"ma-title\">\n          <h1>Demo 後台資料處理</h1>\n          <p>用來檢查 Core 狀態、掃描檔案、啟動素材處理、追蹤進度，並快速測試 Demo 前的資料是否準備好。</p>\n        </div>\n        <div class=\"ma-actions\">\n          <button class=\"ma-btn\" id=\"maBtnHealth\">檢查 Core</button>\n          <button class=\"ma-btn\" id=\"maBtnVideos\">更新影片清單</button>\n          <button class=\"ma-btn primary\" id=\"maBtnScan\">掃描檔案</button>\n        </div>\n      </div>\n\n      <section class=\"ma-section active\" id=\"ma-tab-overview\">\n        <div class=\"ma-grid\">\n          <div class=\"ma-stat\"><label>Core Status</label><strong id=\"maStatHealth\">—</strong><span id=\"maStatHealthSub\">尚未檢查</span></div>\n          <div class=\"ma-stat\"><label>Videos</label><strong id=\"maStatVideos\">0</strong><span id=\"maStatVideosSub\">尚未載入</span></div>\n          <div class=\"ma-stat\"><label>Last HTTP</label><strong id=\"maStatHttp\">—</strong><span id=\"maStatHttpSub\">等待 API 回應</span></div>\n          <div class=\"ma-stat\"><label>Progress</label><strong id=\"maStatProgress\">—</strong><span id=\"maStatProgressSub\">可輸入 UUID 查詢</span></div>\n        </div>\n\n        <div class=\"ma-split\">\n          <div class=\"ma-card\">\n            <div class=\"ma-card-head\">\n              <div><h3>Demo Readiness</h3><p>建議 Demo 前依序確認這四件事。</p></div>\n            </div>\n            <div class=\"ma-card-body\">\n              <div class=\"ma-list\" id=\"maChecklist\"></div>\n            </div>\n          </div>\n\n          <div class=\"ma-card\">\n            <div class=\"ma-card-head\">\n              <div><h3>Current Target</h3><p>目前操作用的影片 UUID / 任務 UUID。</p></div>\n            </div>\n            <div class=\"ma-card-body\">\n              <div class=\"ma-field\">\n                <label>UUID</label>\n                <input class=\"ma-input\" id=\"maUuid\" placeholder=\"貼上 video_uuid / asset uuid\" value=\"384b0ff44aaaa1f1\" />\n              </div>\n              <div class=\"ma-row\" style=\"margin-top:12px\">\n                <button class=\"ma-btn\" id=\"maBtnLookup\">Lookup</button>\n                <button class=\"ma-btn\" id=\"maBtnProcess\">Process</button>\n                <button class=\"ma-btn\" id=\"maBtnProgress\">Progress</button>\n              </div>\n              <div class=\"ma-progress\"><span id=\"maProgressBar\"></span></div>\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-processing\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>資料處理控制台</h3><p>掃描素材、指定 UUID 觸發處理、查詢處理進度。</p></div>\n            <span class=\"ma-pill blue\">Core Proxy Mode</span>\n          </div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-form\">\n              <div class=\"ma-field\">\n                <label>API Proxy Endpoint</label>\n                <input class=\"ma-input\" id=\"maProxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" />\n              </div>\n              <div class=\"ma-field\">\n                <label>Request Timeout</label>\n                <select class=\"ma-select\" id=\"maTimeout\">\n                  <option value=\"8000\">8 秒</option>\n                  <option value=\"15000\" selected>15 秒</option>\n                  <option value=\"30000\">30 秒</option>\n                </select>\n              </div>\n              <div class=\"ma-field full\">\n                <label>Process Body JSON，可先留空</label>\n                <textarea class=\"ma-textarea\" id=\"maProcessBody\">{}</textarea>\n              </div>\n            </div>\n            <div class=\"ma-row\" style=\"margin-top:14px\">\n              <button class=\"ma-btn primary\" id=\"maBtnScan2\">GET /api/v1/files/scan</button>\n              <button class=\"ma-btn\" id=\"maBtnProcess2\">POST /api/v1/assets/:uuid/process</button>\n              <button class=\"ma-btn\" id=\"maBtnProgress2\">GET /api/v1/progress/:uuid</button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\"><div><h3>最近任務 / 狀態</h3><p>這裡會顯示最近一次 scan、process、progress 的結果摘要。</p></div></div>\n          <div class=\"ma-card-body\" id=\"maJobSummary\"><div class=\"ma-empty\">尚未執行任何資料處理 API。</div></div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-videos\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>影片清單</h3><p>呼叫 GET /api/v1/videos，確認目前 Core 已註冊的影片。</p></div>\n            <button class=\"ma-btn primary\" id=\"maBtnVideos2\">重新載入</button>\n          </div>\n          <div class=\"ma-card-body\" id=\"maVideoList\"><div class=\"ma-empty\">尚未載入影片。</div></div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-tools\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>快速 API 測試</h3><p>保留八個 Demo 常用測試入口。需要 PHP proxy 支援 method/path/body。</p></div>\n          </div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-quick\" id=\"maApiCards\"></div>\n          </div>\n        </div>\n\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\"><div><h3>自訂 API Call</h3><p>當 Core 新增 endpoint 時，可直接在這裡測試。</p></div></div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-form\">\n              <div class=\"ma-field\"><label>Method</label><select class=\"ma-select\" id=\"maCustomMethod\"><option>GET</option><option>POST</option><option>PATCH</option><option>DELETE</option></select></div>\n              <div class=\"ma-field\"><label>Path</label><input class=\"ma-input\" id=\"maCustomPath\" value=\"/health\" /></div>\n              <div class=\"ma-field full\"><label>Body JSON</label><textarea class=\"ma-textarea\" id=\"maCustomBody\">{}</textarea></div>\n            </div>\n            <div class=\"ma-row\" style=\"margin-top:14px\"><button class=\"ma-btn primary\" id=\"maBtnCustom\">送出自訂 API</button></div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-contract\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>Contract 檢查</h3><p>每次 API 回來後，會自動檢查欄位是否符合 Portal / Core 約定格式。</p></div>\n            <span class=\"ma-pill blue\" id=\"maContractStatus\">尚未檢查</span>\n          </div>\n          <div class=\"ma-card-body\">\n            <div class=\"ma-quick\" id=\"maContractCards\"></div>\n          </div>\n        </div>\n\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\"><div><h3>Contract 明細</h3><p>綠色代表欄位存在且型別正確；橘色代表缺少或型別不符。</p></div></div>\n          <div class=\"ma-card-body\" id=\"maContractDetail\"><div class=\"ma-empty\">尚未取得 API response。</div></div>\n        </div>\n      </section>\n\n      <section class=\"ma-section\" id=\"ma-tab-logs\">\n        <div class=\"ma-card\">\n          <div class=\"ma-card-head\">\n            <div><h3>Raw Response</h3><p>所有 API 回應會顯示在這裡，方便截圖給 Warren / Lynn / Wendy 對照。</p></div>\n            <button class=\"ma-btn danger\" id=\"maBtnClearLog\">清空</button>\n          </div>\n          <div class=\"ma-card-body\"><div class=\"ma-log\" id=\"maLog\">Ready.</div></div>\n        </div>\n      </section>\n    </main>\n  </div>\n  <div class=\"ma-toast\" id=\"maToast\"></div>\n\n  <script>\n  (function(){\n    \'use strict\';\n\n    var state = {\n      health:false,\n      videos:[],\n      lastHttp:\'—\',\n      lastData:null,\n      progress:null\n    };\n\n    var CONTRACTS = {\n      search: {\n        label:\'Search Response\',\n        detect:function(data){ return data && (Array.isArray(data.results) || Array.isArray(data.hits)); },\n        fields:[\n          {path:\'query\', type:\'string\', required:true},\n          {path:\'total\', type:\'number\', required:false, alt:\'count\'},\n          {path:\'results\', type:\'array\', required:false, alt:\'hits\'},\n          {path:\'results.0.moment_id\', type:\'string\', required:false, alt:\'hits.0.id\'},\n          {path:\'results.0.video_id\', type:\'string\', required:false, alt:\'hits.0.vid\'},\n          {path:\'results.0.t_start\', type:\'number\', required:false, alt:\'hits.0.start\'},\n          {path:\'results.0.t_end\', type:\'number\', required:false, alt:\'hits.0.end\'},\n          {path:\'results.0.title\', type:\'string\', required:false, alt:\'hits.0.title\'},\n          {path:\'results.0.snippet\', type:\'string\', required:false, alt:\'hits.0.text\'},\n          {path:\'results.0.score\', type:\'number\', required:false, alt:\'hits.0.score\'},\n          {path:\'results.0.video_url\', type:\'string\', required:false, alt:\'results.0.video_proxy_url\'}\n        ]\n      },\n      videos: {\n        label:\'Videos Response\',\n        detect:function(data){ return data && Array.isArray(data.videos); },\n        fields:[\n          {path:\'videos\', type:\'array\', required:true},\n          {path:\'videos.0.uuid\', type:\'string\', required:false, alt:\'videos.0.video_id\'},\n          {path:\'videos.0.file_name\', type:\'string\', required:false, alt:\'videos.0.title\'},\n          {path:\'videos.0.duration\', type:\'number\', required:false},\n          {path:\'videos.0.width\', type:\'number\', required:false},\n          {path:\'videos.0.height\', type:\'number\', required:false}\n        ]\n      },\n      lookup: {\n        label:\'Lookup / Source Response\',\n        detect:function(data){ return data && (data.uuid || data.video_id || data.file_path || data.file_name || data.video_url); },\n        fields:[\n          {path:\'uuid\', type:\'string\', required:false, alt:\'video_id\'},\n          {path:\'file_name\', type:\'string\', required:false, alt:\'title\'},\n          {path:\'file_path\', type:\'string\', required:false, alt:\'source_path\'},\n          {path:\'duration\', type:\'number\', required:false},\n          {path:\'width\', type:\'number\', required:false},\n          {path:\'height\', type:\'number\', required:false}\n        ]\n      },\n      progress: {\n        label:\'Progress Response\',\n        detect:function(data){ return data && (\'progress\' in data || \'status\' in data || \'ok\' in data); },\n        fields:[\n          {path:\'ok\', type:\'boolean\', required:false},\n          {path:\'status\', type:\'string\', required:false},\n          {path:\'progress\', type:\'number\', required:false, alt:\'percent\'},\n          {path:\'message\', type:\'string\', required:false}\n        ]\n      },\n      error: {\n        label:\'Error Response\',\n        detect:function(data){ return data && (data.ok === false || data.error || data.error_code || data.message); },\n        fields:[\n          {path:\'ok\', type:\'boolean\', required:false},\n          {path:\'error_code\', type:\'string\', required:false},\n          {path:\'message\', type:\'string\', required:false},\n          {path:\'trace_id\', type:\'string\', required:false}\n        ]\n      }\n    };\n\n    var QUICK_APIS = [\n      {name:\'Health\', method:\'GET\', path:\'/health\', body:null},\n      {name:\'Videos\', method:\'GET\', path:\'/api/v1/videos\', body:null},\n      {name:\'Lookup\', method:\'GET\', path:function(){return \'/api/v1/lookup?uuid=\' + enc(uuid());}, body:null},\n      {name:\'Files Scan\', method:\'GET\', path:\'/api/v1/files/scan\', body:null},\n      {name:\'Asset Process\', method:\'POST\', path:function(){return \'/api/v1/assets/\' + enc(uuid()) + \'/process\';}, body:{}},\n      {name:\'Progress\', method:\'GET\', path:function(){return \'/api/v1/progress/\' + enc(uuid());}, body:null},\n      {name:\'Search Test\', method:\'POST\', path:\'/api/v1/n8n/search\', body:{query:\'sun\',limit:3}},\n      {name:\'Person Status\', method:\'GET\', path:\'/api/v1/people/status\', body:null}\n    ];\n\n    function $(id){ return document.getElementById(id); }\n    function enc(v){ return encodeURIComponent(v || \'\'); }\n    function uuid(){ return ($(\'maUuid\').value || \'\').trim(); }\n    function proxy(){ return ($(\'maProxy\').value || \'/wp-admin/admin-ajax.php?action=momentry_core_proxy\').trim(); }\n    function esc(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\n    function pretty(obj){ try{return JSON.stringify(obj,null,2);}catch(e){return String(obj);} }\n    function now(){ return new Date().toLocaleString(\'zh-TW\',{hour12:false}); }\n\n    function toast(msg){\n      var t=$(\'maToast\');\n      t.textContent=msg;\n      t.style.display=\'block\';\n      clearTimeout(toast._timer);\n      toast._timer=setTimeout(function(){t.style.display=\'none\';},2600);\n    }\n\n    function log(title, data){\n      var box=$(\'maLog\');\n      var prev=box.textContent === \'Ready.\' ? \'\' : box.textContent + \'\\n\\n\';\n      box.textContent = prev + \'[\' + now() + \'] \' + title + \'\\n\' + pretty(data);\n      box.scrollTop = box.scrollHeight;\n    }\n\n    function setLoading(btn, isLoading){\n      if(!btn) return;\n      if(isLoading){ btn.dataset.oldText = btn.textContent; btn.textContent = \'執行中…\'; btn.disabled = true; }\n      else { btn.textContent = btn.dataset.oldText || btn.textContent; btn.disabled = false; }\n    }\n\n    function parseBody(id){\n      var txt = ($(id).value || \'\').trim();\n      if(!txt) return {};\n      try{return JSON.parse(txt);}catch(e){throw new Error(\'Body JSON 格式錯誤：\' + e.message);}\n    }\n\n    function normalizeProxyResponse(raw){\n      // Supports both shapes:\n      // 1) proxy returns {ok:true,http_code:200,data:{...}}\n      // 2) proxy directly returns Core JSON\n      if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw)){\n        return raw;\n      }\n      return {ok:true,http_code:200,data:raw};\n    }\n\n    function getPath(obj,path){\n      if(!obj || !path) return undefined;\n      var parts = String(path).split(\'.\');\n      var cur = obj;\n      for(var i=0;i<parts.length;i++){\n        if(cur == null) return undefined;\n        cur = cur[parts[i]];\n      }\n      return cur;\n    }\n\n    function typeOk(value,type){\n      if(value === undefined || value === null) return false;\n      if(type === \'array\') return Array.isArray(value);\n      if(type === \'number\') return typeof value === \'number\' && !isNaN(value);\n      return typeof value === type;\n    }\n\n    function detectContract(data){\n      if(!data || typeof data !== \'object\') return null;\n      if(CONTRACTS.error.detect(data)) return \'error\';\n      if(CONTRACTS.search.detect(data)) return \'search\';\n      if(CONTRACTS.videos.detect(data)) return \'videos\';\n      if(CONTRACTS.progress.detect(data)) return \'progress\';\n      if(CONTRACTS.lookup.detect(data)) return \'lookup\';\n      return null;\n    }\n\n    function validateContract(wrapped){\n      var data = wrapped && (wrapped.data || wrapped);\n      var key = detectContract(data);\n      if(!key){\n        renderContract(null, [], data);\n        return;\n      }\n      var contract = CONTRACTS[key];\n      var results = contract.fields.map(function(f){\n        var value = getPath(data,f.path);\n        var ok = typeOk(value,f.type);\n        var usedAlt = false;\n        if(!ok && f.alt){\n          var altValue = getPath(data,f.alt);\n          if(typeOk(altValue,f.type)){\n            ok = true;\n            value = altValue;\n            usedAlt = true;\n          }\n        }\n        return {field:f.path, alt:f.alt || \'\', type:f.type, required:!!f.required, ok:ok, usedAlt:usedAlt, value:value, missingRequired:f.required && !ok};\n      });\n      renderContract(contract, results, data);\n    }\n\n    function renderContract(contract, results, data){\n      var status = $(\'maContractStatus\');\n      var cards = $(\'maContractCards\');\n      var detail = $(\'maContractDetail\');\n      if(!status || !cards || !detail) return;\n      if(!contract){\n        status.textContent = \'未知格式\';\n        status.className = \'ma-pill warn\';\n        cards.innerHTML = \'<div class=\"ma-api-card\"><b>Unknown Contract</b><code>目前 response 無法自動判斷是哪一種 contract</code></div>\';\n        detail.innerHTML = \'<div class=\"ma-log\">\' + esc(pretty(data)) + \'</div>\';\n        return;\n      }\n      var total = results.length;\n      var pass = results.filter(function(r){return r.ok;}).length;\n      var requiredFail = results.filter(function(r){return r.missingRequired;}).length;\n      var score = total ? Math.round(pass / total * 100) : 0;\n      status.textContent = requiredFail ? \'Required Missing\' : score + \'% Pass\';\n      status.className = \'ma-pill \' + (requiredFail ? \'err\' : (score >= 80 ? \'ok\' : \'warn\'));\n      cards.innerHTML = [\n        \'<div class=\"ma-api-card\"><b>Contract Type</b><code>\' + esc(contract.label) + \'</code></div>\',\n        \'<div class=\"ma-api-card\"><b>Passed Fields</b><code>\' + pass + \' / \' + total + \'</code></div>\',\n        \'<div class=\"ma-api-card\"><b>Required Missing</b><code>\' + requiredFail + \'</code></div>\',\n        \'<div class=\"ma-api-card\"><b>Score</b><code>\' + score + \'%</code></div>\'\n      ].join(\'\');\n      detail.innerHTML = \'<div class=\"ma-table-wrap\"><table class=\"ma-table\"><thead><tr><th>Status</th><th>Field</th><th>Type</th><th>Required</th><th>Value</th></tr></thead><tbody>\' +\n        results.map(function(r){\n          var fieldText = r.field + (r.usedAlt ? \' ← \' + r.alt : (r.alt ? \' / alt: \' + r.alt : \'\'));\n          var valueText = typeof r.value === \'object\' ? pretty(r.value).slice(0,180) : String(r.value == null ? \'\' : r.value).slice(0,180);\n          return \'<tr>\' +\n            \'<td><span class=\"ma-pill \' + (r.ok ? \'ok\' : (r.required ? \'err\' : \'warn\')) + \'\">\' + (r.ok ? \'OK\' : \'Missing\') + \'</span></td>\' +\n            \'<td><code>\' + esc(fieldText) + \'</code></td>\' +\n            \'<td>\' + esc(r.type) + \'</td>\' +\n            \'<td>\' + (r.required ? \'Yes\' : \'No\') + \'</td>\' +\n            \'<td><code>\' + esc(valueText) + \'</code></td>\' +\n          \'</tr>\';\n        }).join(\'\') +\n        \'</tbody></table></div>\';\n    }\n\n    async function coreCall(method, path, body, btn){\n      setLoading(btn,true);\n      var start = performance.now();\n      try{\n        var controller = new AbortController();\n        var timeoutMs = Number($(\'maTimeout\').value || 15000);\n        var timer = setTimeout(function(){ controller.abort(); }, timeoutMs);\n        var payload = { method: method, path: path };\n        if(body !== null && body !== undefined) payload.body = body;\n\n        var res = await fetch(proxy(), {\n          method:\'POST\',\n          headers:{\'Content-Type\':\'application/json\'},\n          body:JSON.stringify(payload),\n          signal:controller.signal\n        });\n        clearTimeout(timer);\n\n        var text = await res.text();\n        var json;\n        try{ json = text ? JSON.parse(text) : null; }catch(e){ json = {raw_response:text}; }\n        var wrapped = normalizeProxyResponse(json);\n        var ms = Math.round(performance.now() - start);\n\n        state.lastHttp = String(wrapped.http_code || res.status || \'—\');\n        state.lastData = wrapped;\n        $(\'maStatHttp\').textContent = state.lastHttp;\n        $(\'maStatHttpSub\').textContent = ms + \' ms · \' + method + \' \' + path;\n        log(method + \' \' + path, wrapped);\n        validateContract(wrapped);\n        updateChecklist();\n\n        if(!res.ok || wrapped.ok === false || Number(wrapped.http_code || 200) >= 400){\n          toast(\'API 回傳錯誤：HTTP \' + (wrapped.http_code || res.status));\n        }else{\n          toast(\'API 成功：\' + method + \' \' + path);\n        }\n        return wrapped;\n      }catch(err){\n        var errorObj = {ok:false,error:err.name === \'AbortError\' ? \'TIMEOUT\' : err.message, method:method, path:path};\n        state.lastHttp = err.name === \'AbortError\' ? \'timeout\' : \'error\';\n        $(\'maStatHttp\').textContent = state.lastHttp;\n        $(\'maStatHttpSub\').textContent = method + \' \' + path;\n        log(method + \' \' + path, errorObj);\n        validateContract(errorObj);\n        toast(errorObj.error);\n        return errorObj;\n      }finally{\n        setLoading(btn,false);\n      }\n    }\n\n    async function checkHealth(btn){\n      var r = await coreCall(\'GET\',\'/health\',null,btn);\n      var ok = r && (r.ok === true || r.data || Number(r.http_code) === 200);\n      state.health = !!ok;\n      $(\'maStatHealth\').textContent = ok ? \'OK\' : \'FAIL\';\n      $(\'maStatHealthSub\').textContent = ok ? \'Core 可連線\' : \'Core 未通或 proxy 未通\';\n      updateChecklist();\n    }\n\n    async function loadVideos(btn){\n      var r = await coreCall(\'GET\',\'/api/v1/videos\',null,btn);\n      var data = r && (r.data || r);\n      var videos = [];\n      if(data && Array.isArray(data.videos)) videos = data.videos;\n      if(data && Array.isArray(data.data && data.data.videos)) videos = data.data.videos;\n      state.videos = videos;\n      $(\'maStatVideos\').textContent = String(videos.length || 0);\n      $(\'maStatVideosSub\').textContent = videos.length ? \'已載入影片清單\' : \'沒有影片或格式不同\';\n      renderVideos(videos);\n      updateChecklist();\n    }\n\n    function renderVideos(videos){\n      var el=$(\'maVideoList\');\n      if(!videos || !videos.length){ el.innerHTML=\'<div class=\"ma-empty\">沒有影片資料。請確認 Core 是否已有註冊影片。</div>\'; return; }\n      el.innerHTML = \'<div class=\"ma-list\">\' + videos.map(function(v){\n        var id = v.uuid || v.video_uuid || v.video_id || \'\';\n        return \'<div class=\"ma-video\">\' +\n          \'<div><h4>\' + esc(v.file_name || v.title || id || \'Untitled Video\') + \'</h4>\' +\n          \'<p>UUID: \' + esc(id) + \'<br>Duration: \' + esc(v.duration || v.durationSec || \'—\') + \' sec · Size: \' + esc(v.size || v.sizeKB || \'—\') + \'</p></div>\' +\n          \'<div class=\"ma-row\"><button class=\"ma-btn\" data-use-uuid=\"\' + esc(id) + \'\">使用 UUID</button><button class=\"ma-btn\" data-process-uuid=\"\' + esc(id) + \'\">處理</button></div>\' +\n        \'</div>\';\n      }).join(\'\') + \'</div>\';\n    }\n\n    async function lookup(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      await coreCall(\'GET\',\'/api/v1/lookup?uuid=\' + enc(uuid()),null,btn);\n    }\n\n    async function scan(btn){\n      var r = await coreCall(\'GET\',\'/api/v1/files/scan\',null,btn);\n      renderJobSummary(\'Files Scan\', r);\n    }\n\n    async function processAsset(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      var body;\n      try{ body = parseBody(\'maProcessBody\'); }catch(e){ return toast(e.message); }\n      var r = await coreCall(\'POST\',\'/api/v1/assets/\' + enc(uuid()) + \'/process\', body, btn);\n      renderJobSummary(\'Asset Process\', r);\n    }\n\n    async function progress(btn){\n      if(!uuid()) return toast(\'請先輸入 UUID\');\n      var r = await coreCall(\'GET\',\'/api/v1/progress/\' + enc(uuid()),null,btn);\n      var data = r && (r.data || r);\n      var p = Number(data && (data.progress || data.percent || data.progress_percent || 0));\n      if(!isFinite(p)) p = 0;\n      p = Math.max(0,Math.min(100,p));\n      state.progress = p;\n      $(\'maStatProgress\').textContent = p ? p + \'%\' : (data && data.status ? data.status : \'—\');\n      $(\'maStatProgressSub\').textContent = data && data.status ? data.status : \'progress response received\';\n      $(\'maProgressBar\').style.width = p + \'%\';\n      renderJobSummary(\'Progress\', r);\n      updateChecklist();\n    }\n\n    function renderJobSummary(title, r){\n      var data = r && (r.data || r);\n      var status = (data && (data.status || data.message || data.error_code)) || (r && r.ok ? \'ok\' : \'unknown\');\n      var http = r && (r.http_code || \'—\');\n      $(\'maJobSummary\').innerHTML =\n        \'<div class=\"ma-table-wrap\"><table class=\"ma-table\"><thead><tr><th>Item</th><th>Value</th></tr></thead><tbody>\' +\n        \'<tr><td>Action</td><td>\' + esc(title) + \'</td></tr>\' +\n        \'<tr><td>HTTP</td><td>\' + esc(http) + \'</td></tr>\' +\n        \'<tr><td>Status</td><td>\' + esc(status) + \'</td></tr>\' +\n        \'<tr><td>UUID</td><td>\' + esc(uuid() || \'—\') + \'</td></tr>\' +\n        \'<tr><td>Updated</td><td>\' + esc(now()) + \'</td></tr>\' +\n        \'</tbody></table></div>\';\n    }\n\n    function renderChecklist(){\n      $(\'maChecklist\').innerHTML = [\n        {key:\'Core 連線\', desc:\'GET /health 有回應\', ok:function(){return state.health;}},\n        {key:\'影片清單\', desc:\'GET /api/v1/videos 至少有一支影片\', ok:function(){return state.videos.length > 0;}},\n        {key:\'資料處理\', desc:\'已執行 scan / process / progress 任一 API\', ok:function(){return !!state.lastData;}},\n        {key:\'進度狀態\', desc:\'progress API 有回傳進度或狀態\', ok:function(){return state.progress !== null;}}\n      ].map(function(i){\n        var good = i.ok();\n        return \'<div class=\"ma-video\"><div><h4>\' + esc(i.key) + \'</h4><p>\' + esc(i.desc) + \'</p></div><span class=\"ma-pill \' + (good?\'ok\':\'warn\') + \'\">\' + (good?\'Ready\':\'Pending\') + \'</span></div>\';\n      }).join(\'\');\n    }\n    function updateChecklist(){ renderChecklist(); }\n\n    function renderQuickApis(){\n      $(\'maApiCards\').innerHTML = QUICK_APIS.map(function(a,idx){\n        var p = typeof a.path === \'function\' ? a.path() : a.path;\n        return \'<div class=\"ma-api-card\"><b>\' + esc(a.name) + \'</b><code>\' + esc(a.method + \' \' + p) + \'</code><button class=\"ma-btn\" data-api-idx=\"\' + idx + \'\">Run</button></div>\';\n      }).join(\'\');\n    }\n\n    function bind(){\n      document.querySelectorAll(\'#momentry-admin-app .ma-nav button\').forEach(function(btn){\n        btn.addEventListener(\'click\',function(){\n          document.querySelectorAll(\'#momentry-admin-app .ma-nav button\').forEach(function(b){b.classList.remove(\'active\');});\n          document.querySelectorAll(\'#momentry-admin-app .ma-section\').forEach(function(s){s.classList.remove(\'active\');});\n          btn.classList.add(\'active\');\n          $(\'ma-tab-\' + btn.dataset.tab).classList.add(\'active\');\n        });\n      });\n\n      $(\'maBtnHealth\').onclick=function(){checkHealth(this)};\n      $(\'maBtnVideos\').onclick=function(){loadVideos(this)};\n      $(\'maBtnVideos2\').onclick=function(){loadVideos(this)};\n      $(\'maBtnScan\').onclick=function(){scan(this)};\n      $(\'maBtnScan2\').onclick=function(){scan(this)};\n      $(\'maBtnLookup\').onclick=function(){lookup(this)};\n      $(\'maBtnProcess\').onclick=function(){processAsset(this)};\n      $(\'maBtnProcess2\').onclick=function(){processAsset(this)};\n      $(\'maBtnProgress\').onclick=function(){progress(this)};\n      $(\'maBtnProgress2\').onclick=function(){progress(this)};\n      $(\'maBtnClearLog\').onclick=function(){$(\'maLog\').textContent=\'Ready.\';};\n      $(\'maBtnCustom\').onclick=async function(){\n        var method=$(\'maCustomMethod\').value;\n        var path=$(\'maCustomPath\').value.trim();\n        var body=null;\n        if(method !== \'GET\'){\n          try{ body=parseBody(\'maCustomBody\'); }catch(e){ return toast(e.message); }\n        }\n        await coreCall(method,path,body,this);\n      };\n\n      $(\'maVideoList\').addEventListener(\'click\',function(e){\n        var use = e.target.getAttribute(\'data-use-uuid\');\n        var proc = e.target.getAttribute(\'data-process-uuid\');\n        if(use){ $(\'maUuid\').value = use; toast(\'已套用 UUID\'); renderQuickApis(); }\n        if(proc){ $(\'maUuid\').value = proc; processAsset(e.target); renderQuickApis(); }\n      });\n\n      $(\'maApiCards\').addEventListener(\'click\',async function(e){\n        var idx = e.target.getAttribute(\'data-api-idx\');\n        if(idx == null) return;\n        var a = QUICK_APIS[Number(idx)];\n        var path = typeof a.path === \'function\' ? a.path() : a.path;\n        await coreCall(a.method,path,a.body,e.target);\n        renderQuickApis();\n      });\n\n      $(\'maUuid\').addEventListener(\'input\',renderQuickApis);\n    }\n\n    renderChecklist();\n    renderQuickApis();\n    bind();\n  })();\n  </script>\n</div>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:55:37','2026-05-02 12:55:37','',1416,'https://wp.momentry.ddns.net/?p=1423',0,'revision','',0),
(1424,1,'2026-05-02 12:59:37','2026-05-02 12:59:37','<!-- wp:html -->\n<!--\n  Momentry PHP Proxy + AI Core Test Page\n  Purpose: for HTML / PHP teammate to confirm PHP proxy works,\n  and quickly test whether AI Core API is alive and returns the expected contract.\n\n  Paste into a WordPress HTML block or a custom page.\n\n  IMPORTANT:\n  - Do NOT put Core API Key in this HTML.\n  - PHP should append X-API-Key on server side.\n  - This page calls PHP proxy only.\n\n  Expected PHP proxy shape:\n  POST /wp-admin/admin-ajax.php?action=momentry_core_proxy\n  Body:\n  {\n    \"method\": \"GET\",\n    \"path\": \"/health\",\n    \"body\": {}\n  }\n\n  Expected proxy response shape is flexible:\n  1) { \"ok\": true, \"http_code\": 200, \"data\": {...} }\n  or\n  2) direct Core JSON response\n-->\n\n<div id=\"momentry-core-test\">\n  <style>\n    #momentry-core-test{\n      --bg:#f6f8fc;\n      --card:#ffffff;\n      --text:#162033;\n      --muted:#667085;\n      --line:#e4e9f2;\n      --blue:#2563eb;\n      --blue-soft:#eef4ff;\n      --green:#16a34a;\n      --green-soft:#e9fbeF;\n      --red:#dc2626;\n      --red-soft:#fff1f1;\n      --orange:#f97316;\n      --orange-soft:#fff7ed;\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",\"PingFang TC\",\"Microsoft JhengHei\",Arial,sans-serif;\n      color:var(--text);\n      background:var(--bg);\n      border:1px solid var(--line);\n      border-radius:24px;\n      padding:28px;\n      max-width:1180px;\n      margin:0 auto;\n    }\n    #momentry-core-test *{box-sizing:border-box}\n    .mt-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}\n    .mt-title h1{font-size:28px;line-height:1.2;margin:0 0 8px;letter-spacing:-.04em}\n    .mt-title p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:720px}\n    .mt-badge{display:inline-flex;align-items:center;border-radius:999px;background:#fff;border:1px solid var(--line);padding:8px 12px;color:#344054;font-weight:700;font-size:13px;white-space:nowrap}\n    .mt-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:0 12px 36px rgba(16,24,40,.05)}\n    .mt-card h2{font-size:18px;margin:0 0 6px;letter-spacing:-.02em}\n    .mt-card p{margin:0 0 16px;color:var(--muted);line-height:1.6;font-size:14px}\n    .mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n    .mt-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}\n    .mt-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}\n    .mt-field label{font-size:13px;font-weight:800;color:#344054}\n    .mt-input,.mt-select,.mt-textarea{width:100%;border:1px solid #d8dfeb;border-radius:14px;background:#fff;padding:12px 13px;font:inherit;font-size:14px;color:var(--text);outline:none}\n    .mt-input:focus,.mt-select:focus,.mt-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.10)}\n    .mt-textarea{min-height:92px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}\n    .mt-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}\n    .mt-btn{appearance:none;border:1px solid var(--line);background:#fff;color:#263244;border-radius:14px;padding:11px 15px;font-weight:800;font-size:14px;cursor:pointer;transition:.16s ease;min-height:44px}\n    .mt-btn:hover{border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px)}\n    .mt-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}\n    .mt-btn.primary:hover{background:#1d4ed8;color:#fff}\n    .mt-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}\n    .mt-status-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}\n    .mt-status{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-height:104px}\n    .mt-status label{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}\n    .mt-status strong{display:block;font-size:24px;letter-spacing:-.03em;margin-bottom:6px}\n    .mt-status span{display:block;color:var(--muted);font-size:12px;line-height:1.4;word-break:break-word}\n    .mt-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#f2f4f7;color:#344054;white-space:nowrap}\n    .mt-pill.ok{background:var(--green-soft);color:#166534}.mt-pill.err{background:var(--red-soft);color:#991b1b}.mt-pill.warn{background:var(--orange-soft);color:#9a3412}.mt-pill.blue{background:var(--blue-soft);color:#1e40af}\n    .mt-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}\n    .mt-table{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}\n    .mt-table th,.mt-table td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    .mt-table th{font-size:11px;color:#667085;text-transform:uppercase;letter-spacing:.06em;background:#f9fafb}\n    .mt-table tr:last-child td{border-bottom:0}\n    .mt-log{background:#0f172a;color:#dbeafe;border-radius:18px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto}\n    .mt-empty{border:1px dashed #cbd5e1;border-radius:18px;padding:24px;text-align:center;color:var(--muted);background:#fbfdff}\n    .mt-note{font-size:13px;color:#667085;background:#f9fafb;border:1px solid var(--line);border-radius:16px;padding:14px;line-height:1.6;margin-top:12px}\n    @media(max-width:900px){#momentry-core-test{padding:20px}.mt-header{flex-direction:column}.mt-grid,.mt-grid-3,.mt-status-row{grid-template-columns:1fr}.mt-title h1{font-size:24px}}\n  </style>\n\n  <div class=\"mt-header\">\n    <div class=\"mt-title\">\n      <h1>Momentry PHP Proxy / AI Core 測試頁</h1>\n      <p>這頁是給 HTML / PHP 同事確認：PHP proxy 是否有正確轉接、是否有在 server 端補上 API Key，以及 AI Core 回傳的 contract 是否符合前端需求。</p>\n    </div>\n    <div class=\"mt-badge\">Internal Test Page</div>\n  </div>\n\n  <div class=\"mt-status-row\">\n    <div class=\"mt-status\"><label>PHP Proxy</label><strong id=\"mtProxyStatus\">—</strong><span id=\"mtProxySub\">尚未測試</span></div>\n    <div class=\"mt-status\"><label>AI Core</label><strong id=\"mtCoreStatus\">—</strong><span id=\"mtCoreSub\">尚未測試 /health</span></div>\n    <div class=\"mt-status\"><label>HTTP</label><strong id=\"mtHttpStatus\">—</strong><span id=\"mtHttpSub\">等待 API 回覆</span></div>\n    <div class=\"mt-status\"><label>Contract</label><strong id=\"mtContractScore\">—</strong><span id=\"mtContractSub\">尚未檢查</span></div>\n  </div>\n\n  <div class=\"mt-card\">\n    <h2>1. Proxy 設定</h2>\n    <p>確認 WordPress PHP proxy endpoint。HTML 只打這支，不直接打 Core，也不放 API Key。</p>\n    <div class=\"mt-grid\">\n      <div class=\"mt-field\">\n        <label>PHP Proxy URL</label>\n        <input class=\"mt-input\" id=\"mtProxyUrl\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\">\n      </div>\n      <div class=\"mt-field\">\n        <label>Timeout</label>\n        <select class=\"mt-select\" id=\"mtTimeout\">\n          <option value=\"8000\">8 秒</option>\n          <option value=\"15000\" selected>15 秒</option>\n          <option value=\"30000\">30 秒</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"mt-note\">\n      PHP proxy 建議回傳：<code>{ ok, http_code, data }</code>。如果 PHP 直接回 Core JSON，這頁也能讀，但比較不利 debug。\n    </div>\n  </div>\n\n  <div class=\"mt-card\">\n    <h2>2. 快速測試</h2>\n    <p>先測 /health，再測 videos、scan、progress。這幾個足夠確認 PHP 與 Core 是否正常。</p>\n    <div class=\"mt-actions\">\n      <button class=\"mt-btn primary\" data-quick=\"health\">檢查 AI Core /health</button>\n      <button class=\"mt-btn\" data-quick=\"videos\">取得影片清單 /videos</button>\n      <button class=\"mt-btn\" data-quick=\"scan\">掃描檔案 /files/scan</button>\n      <button class=\"mt-btn\" data-quick=\"lookup\">Lookup UUID</button>\n      <button class=\"mt-btn\" data-quick=\"progress\">查詢進度 /progress</button>\n      <button class=\"mt-btn\" data-quick=\"search\">搜尋測試 /n8n/search</button>\n    </div>\n    <div class=\"mt-grid\" style=\"margin-top:18px\">\n      <div class=\"mt-field\">\n        <label>UUID，用於 Lookup / Progress</label>\n        <input class=\"mt-input\" id=\"mtUuid\" value=\"384b0ff44aaaa1f1\" placeholder=\"video uuid / asset uuid\">\n      </div>\n      <div class=\"mt-field\">\n        <label>Search Query，用於搜尋測試</label>\n        <input class=\"mt-input\" id=\"mtQuery\" value=\"sun\" placeholder=\"sun / stamp / charles\">\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mt-card\">\n    <h2>3. 自訂 API 測試</h2>\n    <p>如果 Core 新增 endpoint，可以在這裡直接輸入 method、path、body 測試。</p>\n    <div class=\"mt-grid\">\n      <div class=\"mt-field\">\n        <label>Method</label>\n        <select class=\"mt-select\" id=\"mtMethod\">\n          <option>GET</option>\n          <option>POST</option>\n          <option>PATCH</option>\n          <option>DELETE</option>\n        </select>\n      </div>\n      <div class=\"mt-field\">\n        <label>Core Path</label>\n        <input class=\"mt-input\" id=\"mtPath\" value=\"/health\" placeholder=\"/api/v1/videos\">\n      </div>\n    </div>\n    <div class=\"mt-field\">\n      <label>Body JSON，GET 可留空</label>\n      <textarea class=\"mt-textarea\" id=\"mtBody\">{}</textarea>\n    </div>\n    <div class=\"mt-actions\">\n      <button class=\"mt-btn primary\" id=\"mtRunCustom\">送出測試</button>\n      <button class=\"mt-btn\" id=\"mtClear\">清空結果</button>\n    </div>\n  </div>\n\n  <div class=\"mt-grid\">\n    <div class=\"mt-card\">\n      <h2>4. Contract 檢查</h2>\n      <p>檢查目前回覆是否符合前端預期欄位。</p>\n      <div id=\"mtContractBox\"><div class=\"mt-empty\">尚未取得 API response。</div></div>\n    </div>\n\n    <div class=\"mt-card\">\n      <h2>5. Raw Response</h2>\n      <p>把這段截圖或複製給 PHP / Core 同事最有用。</p>\n      <div class=\"mt-log\" id=\"mtLog\">Ready.</div>\n    </div>\n  </div>\n\n  <script>\n  (function(){\n    \'use strict\';\n\n    var CONTRACTS = {\n      search:{\n        label:\'Search Contract\',\n        detect:function(d){return d && (Array.isArray(d.results) || Array.isArray(d.hits));},\n        fields:[\n          [\'query\',\'string\',true],\n          [\'total\',\'number\',false,\'count\'],\n          [\'results\',\'array\',false,\'hits\'],\n          [\'results.0.moment_id\',\'string\',false,\'hits.0.id\'],\n          [\'results.0.video_id\',\'string\',false,\'hits.0.vid\'],\n          [\'results.0.t_start\',\'number\',false,\'hits.0.start\'],\n          [\'results.0.t_end\',\'number\',false,\'hits.0.end\'],\n          [\'results.0.title\',\'string\',false,\'hits.0.title\'],\n          [\'results.0.snippet\',\'string\',false,\'hits.0.text\'],\n          [\'results.0.score\',\'number\',false,\'hits.0.score\'],\n          [\'results.0.video_url\',\'string\',false,\'results.0.video_proxy_url\']\n        ]\n      },\n      videos:{\n        label:\'Videos Contract\',\n        detect:function(d){return d && Array.isArray(d.videos);},\n        fields:[\n          [\'videos\',\'array\',true],\n          [\'videos.0.uuid\',\'string\',false,\'videos.0.video_id\'],\n          [\'videos.0.file_name\',\'string\',false,\'videos.0.title\'],\n          [\'videos.0.duration\',\'number\',false],\n          [\'videos.0.width\',\'number\',false],\n          [\'videos.0.height\',\'number\',false]\n        ]\n      },\n      progress:{\n        label:\'Progress Contract\',\n        detect:function(d){return d && (\'progress\' in d || \'status\' in d || \'ok\' in d);},\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'status\',\'string\',false],\n          [\'progress\',\'number\',false,\'percent\'],\n          [\'message\',\'string\',false]\n        ]\n      },\n      lookup:{\n        label:\'Lookup / Source Contract\',\n        detect:function(d){return d && (d.uuid || d.video_id || d.file_name || d.file_path || d.video_url);},\n        fields:[\n          [\'uuid\',\'string\',false,\'video_id\'],\n          [\'file_name\',\'string\',false,\'title\'],\n          [\'file_path\',\'string\',false,\'source_path\'],\n          [\'duration\',\'number\',false],\n          [\'width\',\'number\',false],\n          [\'height\',\'number\',false]\n        ]\n      },\n      error:{\n        label:\'Error Contract\',\n        detect:function(d){return d && (d.ok === false || d.error || d.error_code || d.message);},\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'error_code\',\'string\',false],\n          [\'message\',\'string\',false],\n          [\'trace_id\',\'string\',false]\n        ]\n      }\n    };\n\n    function $(id){return document.getElementById(id)}\n    function esc(s){return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\')}\n    function pretty(o){try{return JSON.stringify(o,null,2)}catch(e){return String(o)}}\n    function now(){return new Date().toLocaleString(\'zh-TW\',{hour12:false})}\n    function uuid(){return ($(\'mtUuid\').value || \'\').trim()}\n    function query(){return ($(\'mtQuery\').value || \'\').trim() || \'sun\'}\n    function proxy(){return ($(\'mtProxyUrl\').value || \'\').trim()}\n    function enc(v){return encodeURIComponent(v || \'\')}\n\n    function setBtn(btn,on){\n      if(!btn)return;\n      if(on){btn.dataset.text=btn.textContent;btn.textContent=\'測試中…\';btn.disabled=true}\n      else{btn.textContent=btn.dataset.text || btn.textContent;btn.disabled=false}\n    }\n\n    function getPath(obj,path){\n      var cur=obj;\n      String(path).split(\'.\').forEach(function(p){if(cur != null)cur=cur[p]});\n      return cur;\n    }\n\n    function typeOk(v,type){\n      if(v === undefined || v === null)return false;\n      if(type === \'array\')return Array.isArray(v);\n      if(type === \'number\')return typeof v === \'number\' && !isNaN(v);\n      return typeof v === type;\n    }\n\n    function normalize(raw){\n      if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw))return raw;\n      return {ok:true,http_code:200,data:raw};\n    }\n\n    function detect(data){\n      if(!data || typeof data !== \'object\')return null;\n      if(CONTRACTS.error.detect(data))return \'error\';\n      if(CONTRACTS.search.detect(data))return \'search\';\n      if(CONTRACTS.videos.detect(data))return \'videos\';\n      if(CONTRACTS.progress.detect(data))return \'progress\';\n      if(CONTRACTS.lookup.detect(data))return \'lookup\';\n      return null;\n    }\n\n    function validate(wrapped){\n      var data = wrapped && (wrapped.data || wrapped);\n      var key = detect(data);\n      if(!key){\n        $(\'mtContractScore\').textContent=\'未知\';\n        $(\'mtContractSub\').textContent=\'無法判斷 contract 類型\';\n        $(\'mtContractBox\').innerHTML=\'<div class=\"mt-empty\">未知格式，請看 Raw Response。</div>\';\n        return;\n      }\n\n      var c = CONTRACTS[key];\n      var rows = c.fields.map(function(f){\n        var path=f[0], type=f[1], required=f[2], alt=f[3];\n        var value=getPath(data,path);\n        var ok=typeOk(value,type);\n        var usedAlt=false;\n        if(!ok && alt){\n          var altValue=getPath(data,alt);\n          if(typeOk(altValue,type)){ok=true;value=altValue;usedAlt=true}\n        }\n        return {path:path,type:type,required:required,alt:alt,value:value,ok:ok,usedAlt:usedAlt};\n      });\n\n      var pass=rows.filter(function(r){return r.ok}).length;\n      var requiredFail=rows.filter(function(r){return r.required && !r.ok}).length;\n      var score=rows.length ? Math.round(pass / rows.length * 100) : 0;\n      $(\'mtContractScore\').textContent=score + \'%\';\n      $(\'mtContractSub\').textContent=c.label + (requiredFail ? \'，必要欄位缺少\' : \'，格式可接受\');\n\n      $(\'mtContractBox\').innerHTML =\n        \'<div style=\"margin-bottom:12px\"><span class=\"mt-pill \' + (requiredFail ? \'err\' : (score >= 80 ? \'ok\' : \'warn\')) + \'\">\' + esc(c.label) + \'</span> <span class=\"mt-pill blue\">\' + pass + \'/\' + rows.length + \' fields</span></div>\' +\n        \'<div class=\"mt-table-wrap\"><table class=\"mt-table\"><thead><tr><th>Status</th><th>Field</th><th>Type</th><th>Required</th></tr></thead><tbody>\' +\n        rows.map(function(r){\n          var name=r.path + (r.usedAlt ? \' ← \' + r.alt : (r.alt ? \' / alt: \' + r.alt : \'\'));\n          return \'<tr><td><span class=\"mt-pill \' + (r.ok ? \'ok\' : (r.required ? \'err\' : \'warn\')) + \'\">\' + (r.ok ? \'OK\' : \'Missing\') + \'</span></td><td><code>\' + esc(name) + \'</code></td><td>\' + esc(r.type) + \'</td><td>\' + (r.required ? \'Yes\' : \'No\') + \'</td></tr>\'\n        }).join(\'\') +\n        \'</tbody></table></div>\';\n    }\n\n    function log(title,obj){\n      $(\'mtLog\').textContent=\'[\' + now() + \'] \' + title + \'\\n\' + pretty(obj);\n    }\n\n    function readBody(){\n      var txt=($(\'mtBody\').value || \'\').trim();\n      if(!txt)return {};\n      return JSON.parse(txt);\n    }\n\n    async function callCore(method,path,body,btn){\n      setBtn(btn,true);\n      var started=performance.now();\n      try{\n        var controller=new AbortController();\n        var timer=setTimeout(function(){controller.abort()},Number($(\'mtTimeout\').value || 15000));\n        var payload={method:method,path:path};\n        if(body !== undefined && body !== null)payload.body=body;\n\n        var res=await fetch(proxy(),{\n          method:\'POST\',\n          headers:{\'Content-Type\':\'application/json\'},\n          body:JSON.stringify(payload),\n          signal:controller.signal\n        });\n        clearTimeout(timer);\n        var text=await res.text();\n        var json;\n        try{json=text ? JSON.parse(text) : null}catch(e){json={raw_response:text}}\n        var wrapped=normalize(json);\n        var ms=Math.round(performance.now()-started);\n\n        $(\'mtProxyStatus\').textContent=res.ok ? \'OK\' : \'FAIL\';\n        $(\'mtProxySub\').textContent=\'PHP 有回應，\' + ms + \' ms\';\n        $(\'mtHttpStatus\').textContent=String(wrapped.http_code || res.status || \'—\');\n        $(\'mtHttpSub\').textContent=method + \' \' + path;\n\n        if(path === \'/health\'){\n          var coreOk = res.ok && (wrapped.ok === true || wrapped.data || Number(wrapped.http_code || 200) < 400);\n          $(\'mtCoreStatus\').textContent=coreOk ? \'OK\' : \'FAIL\';\n          $(\'mtCoreSub\').textContent=coreOk ? \'AI Core 正常回應\' : \'AI Core 或 PHP proxy 可能異常\';\n        }\n\n        log(method + \' \' + path, wrapped);\n        validate(wrapped);\n        return wrapped;\n      }catch(e){\n        var err={ok:false,error:e.name === \'AbortError\' ? \'TIMEOUT\' : e.message,method:method,path:path};\n        $(\'mtProxyStatus\').textContent=\'FAIL\';\n        $(\'mtProxySub\').textContent=err.error;\n        $(\'mtHttpStatus\').textContent=e.name === \'AbortError\' ? \'timeout\' : \'error\';\n        $(\'mtHttpSub\').textContent=method + \' \' + path;\n        log(method + \' \' + path, err);\n        validate(err);\n      }finally{\n        setBtn(btn,false);\n      }\n    }\n\n    document.querySelectorAll(\'#momentry-core-test [data-quick]\').forEach(function(btn){\n      btn.addEventListener(\'click\',function(){\n        var q=btn.getAttribute(\'data-quick\');\n        if(q === \'health\')return callCore(\'GET\',\'/health\',null,btn);\n        if(q === \'videos\')return callCore(\'GET\',\'/api/v1/videos\',null,btn);\n        if(q === \'scan\')return callCore(\'GET\',\'/api/v1/files/scan\',null,btn);\n        if(q === \'lookup\')return callCore(\'GET\',\'/api/v1/lookup?uuid=\' + enc(uuid()),null,btn);\n        if(q === \'progress\')return callCore(\'GET\',\'/api/v1/progress/\' + enc(uuid()),null,btn);\n        if(q === \'search\')return callCore(\'POST\',\'/api/v1/n8n/search\',{query:query(),limit:5},btn);\n      });\n    });\n\n    $(\'mtRunCustom\').addEventListener(\'click\',function(){\n      var method=$(\'mtMethod\').value;\n      var path=$(\'mtPath\').value.trim();\n      var body=null;\n      try{ if(method !== \'GET\') body=readBody(); }\n      catch(e){ alert(\'Body JSON 格式錯誤：\' + e.message); return; }\n      callCore(method,path,body,this);\n    });\n\n    $(\'mtClear\').addEventListener(\'click\',function(){\n      $(\'mtLog\').textContent=\'Ready.\';\n      $(\'mtContractBox\').innerHTML=\'<div class=\"mt-empty\">尚未取得 API response。</div>\';\n      $(\'mtContractScore\').textContent=\'—\';\n      $(\'mtContractSub\').textContent=\'尚未檢查\';\n    });\n  })();\n  </script>\n</div>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 12:59:37','2026-05-02 12:59:37','',1416,'https://wp.momentry.ddns.net/?p=1424',0,'revision','',0),
(1425,1,'2026-05-02 13:06:07','2026-05-02 13:06:07','<!-- wp:html -->\n<!--\n  Momentry PHP Proxy + AI Core Test Page\n  目的：給 HTML / PHP 同事確認 PHP proxy 是否正確、AI Core 是否正常、回傳 contract 是否符合前端需求。\n\n  使用方式：\n  1. 貼到 WordPress HTML 區塊或自訂頁面。\n  2. HTML 不放 API Key。\n  3. PHP proxy 在 server 端補上 X-API-Key，再轉呼叫 AI Core。\n\n  建議 PHP proxy：\n  POST /wp-admin/admin-ajax.php?action=momentry_core_proxy\n\n  前端送給 PHP 的 body：\n  {\n    \"method\": \"GET\",\n    \"path\": \"/health\",\n    \"body\": {}\n  }\n\n  建議 PHP 回傳格式：\n  {\n    \"ok\": true,\n    \"core_url\": \"https://api.momentry.ddns.net/health\",\n    \"http_code\": 200,\n    \"data\": {...},\n    \"raw_response\": \"\"\n  }\n-->\n\n<div id=\"momentry-core-test-page\">\n  <style>\n    #momentry-core-test-page{\n      --bg:#f6f8fc;\n      --card:#fff;\n      --text:#172033;\n      --muted:#667085;\n      --line:#e4e9f2;\n      --blue:#2563eb;\n      --blue2:#eef4ff;\n      --green:#16a34a;\n      --green2:#ecfdf3;\n      --red:#dc2626;\n      --red2:#fff1f1;\n      --orange:#f97316;\n      --orange2:#fff7ed;\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",\"PingFang TC\",\"Microsoft JhengHei\",Arial,sans-serif;\n      max-width:1180px;\n      margin:0 auto;\n      padding:28px;\n      color:var(--text);\n      background:var(--bg);\n      border:1px solid var(--line);\n      border-radius:24px;\n    }\n    #momentry-core-test-page *{box-sizing:border-box}\n    .mct-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}\n    .mct-title h1{font-size:28px;line-height:1.25;margin:0 0 8px;letter-spacing:-.04em}\n    .mct-title p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:760px}\n    .mct-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800;white-space:nowrap;color:#344054}\n    .mct-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}\n    .mct-status{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-height:108px;box-shadow:0 10px 28px rgba(16,24,40,.04)}\n    .mct-status label{display:block;margin-bottom:10px;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}\n    .mct-status strong{display:block;font-size:24px;line-height:1.1;margin-bottom:8px;letter-spacing:-.03em}\n    .mct-status span{display:block;color:var(--muted);font-size:12px;line-height:1.45;word-break:break-word}\n    .mct-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:0 12px 36px rgba(16,24,40,.05)}\n    .mct-card h2{font-size:18px;letter-spacing:-.02em;margin:0 0 6px}\n    .mct-card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6}\n    .mct-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n    .mct-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}\n    .mct-field label{font-size:13px;color:#344054;font-weight:900}\n    .mct-input,.mct-select,.mct-textarea{width:100%;border:1px solid #d8dfeb;border-radius:14px;background:#fff;padding:12px 13px;font:inherit;font-size:14px;color:var(--text);outline:none}\n    .mct-input:focus,.mct-select:focus,.mct-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.1)}\n    .mct-textarea{min-height:92px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}\n    .mct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}\n    .mct-btn{appearance:none;border:1px solid var(--line);background:#fff;color:#263244;border-radius:14px;padding:11px 15px;min-height:44px;font-size:14px;font-weight:900;cursor:pointer;transition:.16s ease}\n    .mct-btn:hover{border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px)}\n    .mct-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}\n    .mct-btn.primary:hover{background:#1d4ed8;color:#fff}\n    .mct-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff}\n    .mct-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}\n    .mct-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#f2f4f7;color:#344054;white-space:nowrap}\n    .mct-pill.ok{background:var(--green2);color:#166534}.mct-pill.err{background:var(--red2);color:#991b1b}.mct-pill.warn{background:var(--orange2);color:#9a3412}.mct-pill.blue{background:var(--blue2);color:#1e40af}\n    .mct-note{font-size:13px;color:#667085;background:#f9fafb;border:1px solid var(--line);border-radius:16px;padding:14px;line-height:1.6;margin-top:12px}\n    .mct-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}\n    .mct-mini{border:1px solid var(--line);background:#fbfdff;border-radius:16px;padding:14px;min-height:92px}\n    .mct-mini b{display:block;font-size:13px;margin-bottom:6px}.mct-mini code{font-size:12px;color:#667085;word-break:break-all;line-height:1.45}\n    .mct-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}\n    .mct-table{width:100%;border-collapse:collapse;min-width:720px;font-size:13px}\n    .mct-table th,.mct-table td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    .mct-table th{background:#f9fafb;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.06em}\n    .mct-table tr:last-child td{border-bottom:0}\n    .mct-log{background:#0f172a;color:#dbeafe;border-radius:18px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:520px;overflow:auto}\n    .mct-empty{border:1px dashed #cbd5e1;border-radius:18px;padding:24px;text-align:center;color:var(--muted);background:#fbfdff}\n    .mct-flow{display:flex;flex-direction:column;gap:10px;margin-top:10px}\n    .mct-step{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px}\n    .mct-step b{font-size:13px}.mct-step span{font-size:13px;color:var(--muted);word-break:break-word}\n    @media(max-width:920px){#momentry-core-test-page{padding:20px}.mct-header{flex-direction:column}.mct-status-grid,.mct-grid,.mct-mini-grid{grid-template-columns:1fr}.mct-step{grid-template-columns:1fr}.mct-title h1{font-size:24px}}\n  </style>\n\n  <div class=\"mct-header\">\n    <div class=\"mct-title\">\n      <h1>Momentry PHP → AI Core 測試頁</h1>\n      <p>這頁只做內部測試：確認 PHP Proxy 有沒有做好、AI Core 是否正常、回傳 contract 是否符合 HTML 前端需求。這裡完全不使用 n8n。</p>\n    </div>\n    <div class=\"mct-badge\">Internal Debug Page</div>\n  </div>\n\n  <div class=\"mct-status-grid\">\n    <div class=\"mct-status\"><label>PHP Proxy</label><strong id=\"mctProxyStatus\">—</strong><span id=\"mctProxySub\">尚未測試</span></div>\n    <div class=\"mct-status\"><label>AI Core</label><strong id=\"mctCoreStatus\">—</strong><span id=\"mctCoreSub\">尚未測試 /health</span></div>\n    <div class=\"mct-status\"><label>HTTP</label><strong id=\"mctHttpStatus\">—</strong><span id=\"mctHttpSub\">等待 API 回覆</span></div>\n    <div class=\"mct-status\"><label>Contract</label><strong id=\"mctContractScore\">—</strong><span id=\"mctContractSub\">尚未檢查</span></div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>1. PHP Proxy 設定</h2>\n    <p>HTML 只呼叫這支 PHP proxy。API Key 必須由 PHP 在 server 端補上，不要放在 HTML / JavaScript。</p>\n    <div class=\"mct-grid\">\n      <div class=\"mct-field\">\n        <label>PHP Proxy URL</label>\n        <input class=\"mct-input\" id=\"mctProxyUrl\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\">\n      </div>\n      <div class=\"mct-field\">\n        <label>Timeout</label>\n        <select class=\"mct-select\" id=\"mctTimeout\">\n          <option value=\"8000\">8 秒</option>\n          <option value=\"15000\" selected>15 秒</option>\n          <option value=\"30000\">30 秒</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"mct-note\">\n      判斷邏輯：如果 PHP 有回應但 Core HTTP 是 401，通常代表 PHP proxy 有通，但沒有正確帶上 <code>X-API-Key</code>，或 API Key 不正確。\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>2. 一鍵測整條鏈</h2>\n    <p>建議先按這個。它會依序測：PHP Proxy → AI Core Health → Videos → Files Scan。</p>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" id=\"mctFullTest\">一鍵 Full Test</button>\n      <button class=\"mct-btn\" id=\"mctClearAll\">清空結果</button>\n    </div>\n    <div class=\"mct-flow\" id=\"mctFlowBox\">\n      <div class=\"mct-step\"><b>Step 1</b><span>等待測試 PHP Proxy / Health</span><em class=\"mct-pill\">Pending</em></div>\n      <div class=\"mct-step\"><b>Step 2</b><span>等待測試 AI Core /videos</span><em class=\"mct-pill\">Pending</em></div>\n      <div class=\"mct-step\"><b>Step 3</b><span>等待測試 /files/scan</span><em class=\"mct-pill\">Pending</em></div>\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>3. 常用 API 快速測試</h2>\n    <p>這幾個按鈕可以快速確認 Core 是否正常、PHP 回傳格式是否正確。</p>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" data-quick=\"health\">檢查 /health</button>\n      <button class=\"mct-btn\" data-quick=\"videos\">取得 /api/v1/videos</button>\n      <button class=\"mct-btn\" data-quick=\"scan\">掃描 /api/v1/files/scan</button>\n      <button class=\"mct-btn\" data-quick=\"lookup\">Lookup UUID</button>\n      <button class=\"mct-btn\" data-quick=\"progress\">查詢 Progress</button>\n      <button class=\"mct-btn\" data-quick=\"search\">搜尋測試 /api/v1/search</button>\n    </div>\n    <div class=\"mct-grid\" style=\"margin-top:18px\">\n      <div class=\"mct-field\">\n        <label>UUID，用於 Lookup / Progress</label>\n        <input class=\"mct-input\" id=\"mctUuid\" value=\"384b0ff44aaaa1f1\" placeholder=\"video uuid / asset uuid\">\n      </div>\n      <div class=\"mct-field\">\n        <label>Search Query，用於搜尋測試</label>\n        <input class=\"mct-input\" id=\"mctQuery\" value=\"sun\" placeholder=\"sun / stamp / charles\">\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>4. 自訂 API 測試</h2>\n    <p>如果 Core 新增 endpoint，直接在這裡輸入 method、path、body 測試。</p>\n    <div class=\"mct-grid\">\n      <div class=\"mct-field\">\n        <label>Method</label>\n        <select class=\"mct-select\" id=\"mctMethod\">\n          <option>GET</option>\n          <option>POST</option>\n          <option>PATCH</option>\n          <option>DELETE</option>\n        </select>\n      </div>\n      <div class=\"mct-field\">\n        <label>Core Path</label>\n        <input class=\"mct-input\" id=\"mctPath\" value=\"/health\" placeholder=\"/api/v1/videos\">\n      </div>\n    </div>\n    <div class=\"mct-field\">\n      <label>Body JSON，GET 可留空</label>\n      <textarea class=\"mct-textarea\" id=\"mctBody\">{}</textarea>\n    </div>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" id=\"mctRunCustom\">送出自訂 API</button>\n    </div>\n  </div>\n\n  <div class=\"mct-grid\">\n    <div class=\"mct-card\">\n      <h2>5. Contract 檢查</h2>\n      <p>檢查目前回覆是否符合前端預期欄位。</p>\n      <div class=\"mct-mini-grid\" id=\"mctContractSummary\">\n        <div class=\"mct-mini\"><b>Contract Type</b><code>尚未檢查</code></div>\n        <div class=\"mct-mini\"><b>Wrapper</b><code>尚未檢查</code></div>\n        <div class=\"mct-mini\"><b>Fields</b><code>尚未檢查</code></div>\n      </div>\n      <div style=\"margin-top:14px\" id=\"mctContractBox\"><div class=\"mct-empty\">尚未取得 API response。</div></div>\n    </div>\n\n    <div class=\"mct-card\">\n      <h2>6. Raw Response</h2>\n      <p>這裡最適合截圖或複製給 PHP / Core 同事。</p>\n      <div class=\"mct-log\" id=\"mctLog\">Ready.</div>\n    </div>\n  </div>\n\n  <script>\n  (function(){\n    \'use strict\';\n\n    var CONTRACTS = {\n      health:{\n        label:\'Health Contract\',\n        detect:function(d){ return d && (d.status || d.ok === true || d.message || d.version); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'status\',\'string\',false],\n          [\'message\',\'string\',false],\n          [\'version\',\'string\',false]\n        ]\n      },\n      search:{\n        label:\'Search Contract\',\n        detect:function(d){ return d && (Array.isArray(d.results) || Array.isArray(d.hits)); },\n        fields:[\n          [\'query\',\'string\',true],\n          [\'total\',\'number\',false,\'count\'],\n          [\'results\',\'array\',false,\'hits\'],\n          [\'results.0.moment_id\',\'string\',false,\'hits.0.id\'],\n          [\'results.0.video_id\',\'string\',false,\'hits.0.vid\'],\n          [\'results.0.t_start\',\'number\',false,\'hits.0.start\'],\n          [\'results.0.t_end\',\'number\',false,\'hits.0.end\'],\n          [\'results.0.title\',\'string\',false,\'hits.0.title\'],\n          [\'results.0.snippet\',\'string\',false,\'hits.0.text\'],\n          [\'results.0.score\',\'number\',false,\'hits.0.score\'],\n          [\'results.0.video_url\',\'string\',false,\'results.0.video_proxy_url\']\n        ]\n      },\n      videos:{\n        label:\'Videos Contract\',\n        detect:function(d){ return d && Array.isArray(d.videos); },\n        fields:[\n          [\'videos\',\'array\',true],\n          [\'videos.0.uuid\',\'string\',false,\'videos.0.video_id\'],\n          [\'videos.0.file_name\',\'string\',false,\'videos.0.title\'],\n          [\'videos.0.duration\',\'number\',false],\n          [\'videos.0.width\',\'number\',false],\n          [\'videos.0.height\',\'number\',false]\n        ]\n      },\n      lookup:{\n        label:\'Lookup / Source Contract\',\n        detect:function(d){ return d && (d.uuid || d.video_id || d.file_name || d.file_path || d.video_url); },\n        fields:[\n          [\'uuid\',\'string\',false,\'video_id\'],\n          [\'file_name\',\'string\',false,\'title\'],\n          [\'file_path\',\'string\',false,\'source_path\'],\n          [\'duration\',\'number\',false],\n          [\'width\',\'number\',false],\n          [\'height\',\'number\',false]\n        ]\n      },\n      progress:{\n        label:\'Progress Contract\',\n        detect:function(d){ return d && (\'progress\' in d || \'status\' in d || \'percent\' in d || \'ok\' in d); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'status\',\'string\',false],\n          [\'progress\',\'number\',false,\'percent\'],\n          [\'message\',\'string\',false]\n        ]\n      },\n      scan:{\n        label:\'Scan Contract\',\n        detect:function(d){ return d && (d.scanned || d.files || d.jobs || d.queued || d.ok === true); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'scanned\',\'number\',false],\n          [\'queued\',\'number\',false],\n          [\'files\',\'array\',false],\n          [\'jobs\',\'array\',false],\n          [\'message\',\'string\',false]\n        ]\n      },\n      error:{\n        label:\'Error Contract\',\n        detect:function(d){ return d && (d.ok === false || d.error || d.error_code || Number(d.http_code) >= 400); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'http_code\',\'number\',false],\n          [\'error_code\',\'string\',false],\n          [\'message\',\'string\',false],\n          [\'trace_id\',\'string\',false],\n          [\'raw_response\',\'string\',false]\n        ]\n      }\n    };\n\n    function $(id){ return document.getElementById(id); }\n    function esc(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\n    function pretty(o){ try{return JSON.stringify(o,null,2);}catch(e){return String(o);} }\n    function now(){ return new Date().toLocaleString(\'zh-TW\',{hour12:false}); }\n    function proxy(){ return ($(\'mctProxyUrl\').value || \'\').trim(); }\n    function uuid(){ return ($(\'mctUuid\').value || \'\').trim(); }\n    function query(){ return ($(\'mctQuery\').value || \'\').trim() || \'sun\'; }\n    function enc(v){ return encodeURIComponent(v || \'\'); }\n\n    function setBtn(btn,on){\n      if(!btn) return;\n      if(on){ btn.dataset.text = btn.textContent; btn.textContent = \'測試中…\'; btn.disabled = true; }\n      else { btn.textContent = btn.dataset.text || btn.textContent; btn.disabled = false; }\n    }\n\n    function readBody(){\n      var txt = ($(\'mctBody\').value || \'\').trim();\n      if(!txt) return {};\n      return JSON.parse(txt);\n    }\n\n    function normalize(raw){\n      if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw || \'raw_response\' in raw)) return raw;\n      return { ok:true, http_code:200, data:raw, _wrapper:\'core_raw\' };\n    }\n\n    function getData(wrapped){\n      if(wrapped && typeof wrapped === \'object\' && \'data\' in wrapped && wrapped.data !== null) return wrapped.data;\n      return wrapped;\n    }\n\n    function getPath(obj,path){\n      var cur = obj;\n      String(path).split(\'.\').forEach(function(p){ if(cur != null) cur = cur[p]; });\n      return cur;\n    }\n\n    function typeOk(v,type){\n      if(v === undefined || v === null) return false;\n      if(type === \'array\') return Array.isArray(v);\n      if(type === \'number\') return typeof v === \'number\' && !isNaN(v);\n      return typeof v === type;\n    }\n\n    function detectContract(data, wrapped){\n      if(wrapped && CONTRACTS.error.detect(wrapped)) return \'error\';\n      if(!data || typeof data !== \'object\') return null;\n      if(CONTRACTS.error.detect(data)) return \'error\';\n      if(CONTRACTS.search.detect(data)) return \'search\';\n      if(CONTRACTS.videos.detect(data)) return \'videos\';\n      if(CONTRACTS.lookup.detect(data)) return \'lookup\';\n      if(CONTRACTS.progress.detect(data)) return \'progress\';\n      if(CONTRACTS.scan.detect(data)) return \'scan\';\n      if(CONTRACTS.health.detect(data)) return \'health\';\n      return null;\n    }\n\n    function wrapperLabel(wrapped){\n      if(!wrapped || typeof wrapped !== \'object\') return \'Unknown\';\n      if(\'data\' in wrapped && \'http_code\' in wrapped) return \'PHP normalized: { ok, http_code, data }\';\n      if(\'data\' in wrapped) return \'PHP wrapped: { data }\';\n      if(wrapped._wrapper === \'core_raw\') return \'Core raw response\';\n      return \'Unknown / direct response\';\n    }\n\n    function validate(wrapped){\n      var data = getData(wrapped);\n      var key = detectContract(data, wrapped);\n      var wrapper = wrapperLabel(wrapped);\n\n      if(!key){\n        $(\'mctContractScore\').textContent = \'未知\';\n        $(\'mctContractSub\').textContent = \'無法判斷 contract 類型\';\n        $(\'mctContractSummary\').innerHTML = summaryHtml(\'Unknown\', wrapper, \'0/0\');\n        $(\'mctContractBox\').innerHTML = \'<div class=\"mct-empty\">未知格式，請看 Raw Response。</div>\';\n        return;\n      }\n\n      var c = CONTRACTS[key];\n      var rows = c.fields.map(function(f){\n        var path = f[0], type = f[1], required = f[2], alt = f[3];\n        var value = getPath(data, path);\n        var ok = typeOk(value, type);\n        var usedAlt = false;\n        if(!ok && alt){\n          var altValue = getPath(data, alt);\n          if(typeOk(altValue, type)){ ok = true; value = altValue; usedAlt = true; }\n        }\n        return { path:path, type:type, required:required, alt:alt, value:value, ok:ok, usedAlt:usedAlt };\n      });\n\n      var pass = rows.filter(function(r){ return r.ok; }).length;\n      var requiredFail = rows.filter(function(r){ return r.required && !r.ok; }).length;\n      var score = rows.length ? Math.round(pass / rows.length * 100) : 0;\n\n      $(\'mctContractScore\').textContent = score + \'%\';\n      $(\'mctContractSub\').textContent = c.label + (requiredFail ? \'，必要欄位缺少\' : \'，格式可接受\');\n      $(\'mctContractSummary\').innerHTML = summaryHtml(c.label, wrapper, pass + \'/\' + rows.length + \' fields\');\n\n      $(\'mctContractBox\').innerHTML =\n        \'<div style=\"margin-bottom:12px\"><span class=\"mct-pill \' + (requiredFail ? \'err\' : (score >= 80 ? \'ok\' : \'warn\')) + \'\">\' + esc(c.label) + \'</span> <span class=\"mct-pill blue\">\' + score + \'% Pass</span></div>\' +\n        \'<div class=\"mct-table-wrap\"><table class=\"mct-table\"><thead><tr><th>Status</th><th>Field</th><th>Type</th><th>Required</th></tr></thead><tbody>\' +\n        rows.map(function(r){\n          var name = r.path + (r.usedAlt ? \' ← \' + r.alt : (r.alt ? \' / alt: \' + r.alt : \'\'));\n          return \'<tr>\' +\n            \'<td><span class=\"mct-pill \' + (r.ok ? \'ok\' : (r.required ? \'err\' : \'warn\')) + \'\">\' + (r.ok ? \'OK\' : \'Missing\') + \'</span></td>\' +\n            \'<td><code>\' + esc(name) + \'</code></td>\' +\n            \'<td>\' + esc(r.type) + \'</td>\' +\n            \'<td>\' + (r.required ? \'Yes\' : \'No\') + \'</td>\' +\n          \'</tr>\';\n        }).join(\'\') +\n        \'</tbody></table></div>\';\n    }\n\n    function summaryHtml(type, wrapper, fields){\n      return \'<div class=\"mct-mini\"><b>Contract Type</b><code>\' + esc(type) + \'</code></div>\' +\n             \'<div class=\"mct-mini\"><b>Wrapper</b><code>\' + esc(wrapper) + \'</code></div>\' +\n             \'<div class=\"mct-mini\"><b>Fields</b><code>\' + esc(fields) + \'</code></div>\';\n    }\n\n    function log(title,obj){\n      $(\'mctLog\').textContent = \'[\' + now() + \'] \' + title + \'\\n\' + pretty(obj);\n    }\n\n    function setStep(index, label, detail, status){\n      var cls = status === \'OK\' ? \'ok\' : (status === \'FAIL\' ? \'err\' : (status === \'WARN\' ? \'warn\' : \'\'));\n      var steps = $(\'mctFlowBox\').querySelectorAll(\'.mct-step\');\n      if(!steps[index]) return;\n      steps[index].innerHTML = \'<b>\' + esc(label) + \'</b><span>\' + esc(detail) + \'</span><em class=\"mct-pill \' + cls + \'\">\' + esc(status) + \'</em>\';\n    }\n\n    function updateHttpStatus(wrapped, res, method, path, ms){\n      var http = Number(wrapped && wrapped.http_code ? wrapped.http_code : res.status);\n      $(\'mctHttpStatus\').textContent = String(http || \'—\');\n      $(\'mctHttpSub\').textContent = method + \' \' + path + \' · \' + ms + \' ms\';\n\n      if(http === 401){\n        $(\'mctProxyStatus\').textContent = \'KEY?\';\n        $(\'mctProxySub\').textContent = \'PHP 有回應，但 Core 回 401，請檢查 X-API-Key\';\n      }else if(res.ok){\n        $(\'mctProxyStatus\').textContent = \'OK\';\n        $(\'mctProxySub\').textContent = \'PHP proxy 有正常回應\';\n      }else{\n        $(\'mctProxyStatus\').textContent = \'FAIL\';\n        $(\'mctProxySub\').textContent = \'PHP proxy HTTP \' + res.status;\n      }\n    }\n\n    async function callCore(method, path, body, btn, silent){\n      setBtn(btn, true);\n      var started = performance.now();\n      try{\n        var controller = new AbortController();\n        var timer = setTimeout(function(){ controller.abort(); }, Number($(\'mctTimeout\').value || 15000));\n        var payload = { method:method, path:path };\n        if(body !== undefined && body !== null) payload.body = body;\n\n        var res = await fetch(proxy(), {\n          method:\'POST\',\n          headers:{ \'Content-Type\':\'application/json\' },\n          body:JSON.stringify(payload),\n          signal:controller.signal\n        });\n        clearTimeout(timer);\n\n        var text = await res.text();\n        var json;\n        try{ json = text ? JSON.parse(text) : null; }\n        catch(e){ json = { raw_response:text }; }\n\n        var wrapped = normalize(json);\n        var ms = Math.round(performance.now() - started);\n\n        updateHttpStatus(wrapped, res, method, path, ms);\n\n        if(path === \'/health\'){\n          var http = Number(wrapped.http_code || res.status || 0);\n          var coreOk = res.ok && http < 400 && wrapped.ok !== false;\n          $(\'mctCoreStatus\').textContent = coreOk ? \'OK\' : \'FAIL\';\n          $(\'mctCoreSub\').textContent = http === 401 ? \'Core 回 401，請檢查 PHP 是否帶 API Key\' : (coreOk ? \'AI Core 正常回應\' : \'AI Core 或 PHP proxy 異常\');\n        }\n\n        log(method + \' \' + path, wrapped);\n        validate(wrapped);\n        return { ok:res.ok && Number(wrapped.http_code || res.status || 200) < 400 && wrapped.ok !== false, wrapped:wrapped, status:Number(wrapped.http_code || res.status || 0) };\n      }catch(e){\n        var err = { ok:false, error:e.name === \'AbortError\' ? \'TIMEOUT\' : e.message, method:method, path:path };\n        $(\'mctProxyStatus\').textContent = \'FAIL\';\n        $(\'mctProxySub\').textContent = err.error;\n        $(\'mctHttpStatus\').textContent = e.name === \'AbortError\' ? \'timeout\' : \'error\';\n        $(\'mctHttpSub\').textContent = method + \' \' + path;\n        log(method + \' \' + path, err);\n        validate(err);\n        return { ok:false, wrapped:err, status:0 };\n      }finally{\n        setBtn(btn, false);\n      }\n    }\n\n    async function runFullTest(btn){\n      setBtn(btn, true);\n      setStep(0, \'Step 1\', \'測試 /health 中...\', \'RUN\');\n      setStep(1, \'Step 2\', \'等待測試 /videos\', \'Pending\');\n      setStep(2, \'Step 3\', \'等待測試 /files/scan\', \'Pending\');\n\n      var r1 = await callCore(\'GET\', \'/health\', null, null, true);\n      setStep(0, \'Step 1\', r1.ok ? \'PHP Proxy 與 AI Core /health 正常\' : (\'/health 失敗，HTTP \' + (r1.status || \'error\')), r1.ok ? \'OK\' : \'FAIL\');\n      if(!r1.ok){ setBtn(btn, false); return; }\n\n      setStep(1, \'Step 2\', \'測試 /api/v1/videos 中...\', \'RUN\');\n      var r2 = await callCore(\'GET\', \'/api/v1/videos\', null, null, true);\n      setStep(1, \'Step 2\', r2.ok ? \'/videos 正常回應\' : (\'/videos 失敗，HTTP \' + (r2.status || \'error\')), r2.ok ? \'OK\' : \'FAIL\');\n\n      setStep(2, \'Step 3\', \'測試 /api/v1/files/scan 中...\', \'RUN\');\n      var r3 = await callCore(\'GET\', \'/api/v1/files/scan\', null, null, true);\n      setStep(2, \'Step 3\', r3.ok ? \'/files/scan 正常回應\' : (\'/files/scan 失敗，HTTP \' + (r3.status || \'error\')), r3.ok ? \'OK\' : \'FAIL\');\n\n      setBtn(btn, false);\n    }\n\n    document.querySelectorAll(\'#momentry-core-test-page [data-quick]\').forEach(function(btn){\n      btn.addEventListener(\'click\', function(){\n        var q = btn.getAttribute(\'data-quick\');\n        if(q === \'health\') return callCore(\'GET\', \'/health\', null, btn);\n        if(q === \'videos\') return callCore(\'GET\', \'/api/v1/videos\', null, btn);\n        if(q === \'scan\') return callCore(\'GET\', \'/api/v1/files/scan\', null, btn);\n        if(q === \'lookup\') return callCore(\'GET\', \'/api/v1/lookup?uuid=\' + enc(uuid()), null, btn);\n        if(q === \'progress\') return callCore(\'GET\', \'/api/v1/progress/\' + enc(uuid()), null, btn);\n        if(q === \'search\') return callCore(\'POST\', \'/api/v1/search\', { query:query(), limit:5 }, btn);\n      });\n    });\n\n    $(\'mctRunCustom\').addEventListener(\'click\', function(){\n      var method = $(\'mctMethod\').value;\n      var path = $(\'mctPath\').value.trim();\n      var body = null;\n      try{ if(method !== \'GET\') body = readBody(); }\n      catch(e){ alert(\'Body JSON 格式錯誤：\' + e.message); return; }\n      callCore(method, path, body, this);\n    });\n\n    $(\'mctFullTest\').addEventListener(\'click\', function(){ runFullTest(this); });\n\n    $(\'mctClearAll\').addEventListener(\'click\', function(){\n      $(\'mctLog\').textContent = \'Ready.\';\n      $(\'mctProxyStatus\').textContent = \'—\';\n      $(\'mctProxySub\').textContent = \'尚未測試\';\n      $(\'mctCoreStatus\').textContent = \'—\';\n      $(\'mctCoreSub\').textContent = \'尚未測試 /health\';\n      $(\'mctHttpStatus\').textContent = \'—\';\n      $(\'mctHttpSub\').textContent = \'等待 API 回覆\';\n      $(\'mctContractScore\').textContent = \'—\';\n      $(\'mctContractSub\').textContent = \'尚未檢查\';\n      $(\'mctContractSummary\').innerHTML = summaryHtml(\'尚未檢查\',\'尚未檢查\',\'尚未檢查\');\n      $(\'mctContractBox\').innerHTML = \'<div class=\"mct-empty\">尚未取得 API response。</div>\';\n      setStep(0, \'Step 1\', \'等待測試 PHP Proxy / Health\', \'Pending\');\n      setStep(1, \'Step 2\', \'等待測試 AI Core /videos\', \'Pending\');\n      setStep(2, \'Step 3\', \'等待測試 /files/scan\', \'Pending\');\n    });\n  })();\n  </script>\n</div>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:06:07','2026-05-02 13:06:07','',1416,'https://wp.momentry.ddns.net/?p=1425',0,'revision','',0),
(1426,1,'2026-05-02 13:07:55','2026-05-02 13:07:55','<!-- wp:html -->\n<!--\n  Momentry PHP Proxy + AI Core Test Page\n  目的：給 HTML / PHP 同事確認 PHP proxy 是否正確、AI Core 是否正常、回傳 contract 是否符合前端需求。\n\n  使用方式：\n  1. 貼到 WordPress HTML 區塊或自訂頁面。\n  2. HTML 不放 API Key。\n  3. PHP proxy 在 server 端補上 X-API-Key，再轉呼叫 AI Core。\n\n  建議 PHP proxy：\n  POST /wp-admin/admin-ajax.php?action=momentry_core_proxy\n\n  前端送給 PHP 的 body：\n  {\n    \"method\": \"GET\",\n    \"path\": \"/health\",\n    \"body\": {}\n  }\n\n  建議 PHP 回傳格式：\n  {\n    \"ok\": true,\n    \"core_url\": \"https://api.momentry.ddns.net/health\",\n    \"http_code\": 200,\n    \"data\": {...},\n    \"raw_response\": \"\"\n  }\n-->\n\n<div id=\"momentry-core-test-page\">\n  <style>\n    #momentry-core-test-page{\n      --bg:#f6f8fc;\n      --card:#fff;\n      --text:#172033;\n      --muted:#667085;\n      --line:#e4e9f2;\n      --blue:#2563eb;\n      --blue2:#eef4ff;\n      --green:#16a34a;\n      --green2:#ecfdf3;\n      --red:#dc2626;\n      --red2:#fff1f1;\n      --orange:#f97316;\n      --orange2:#fff7ed;\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",\"PingFang TC\",\"Microsoft JhengHei\",Arial,sans-serif;\n      max-width:1180px;\n      margin:0 auto;\n      padding:28px;\n      color:var(--text);\n      background:var(--bg);\n      border:1px solid var(--line);\n      border-radius:24px;\n    }\n    #momentry-core-test-page *{box-sizing:border-box}\n    .mct-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}\n    .mct-title h1{font-size:28px;line-height:1.25;margin:0 0 8px;letter-spacing:-.04em}\n    .mct-title p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:760px}\n    .mct-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:800;white-space:nowrap;color:#344054}\n    .mct-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}\n    .mct-status{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-height:108px;box-shadow:0 10px 28px rgba(16,24,40,.04)}\n    .mct-status label{display:block;margin-bottom:10px;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}\n    .mct-status strong{display:block;font-size:24px;line-height:1.1;margin-bottom:8px;letter-spacing:-.03em}\n    .mct-status span{display:block;color:var(--muted);font-size:12px;line-height:1.45;word-break:break-word}\n    .mct-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:0 12px 36px rgba(16,24,40,.05)}\n    .mct-card h2{font-size:18px;letter-spacing:-.02em;margin:0 0 6px}\n    .mct-card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6}\n    .mct-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}\n    .mct-field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}\n    .mct-field label{font-size:13px;color:#344054;font-weight:900}\n    .mct-input,.mct-select,.mct-textarea{width:100%;border:1px solid #d8dfeb;border-radius:14px;background:#fff;padding:12px 13px;font:inherit;font-size:14px;color:var(--text);outline:none}\n    .mct-input:focus,.mct-select:focus,.mct-textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.1)}\n    .mct-textarea{min-height:92px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}\n    .mct-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}\n    .mct-btn{appearance:none;border:1px solid var(--line);background:#fff;color:#263244;border-radius:14px;padding:11px 15px;min-height:44px;font-size:14px;font-weight:900;cursor:pointer;transition:.16s ease}\n    .mct-btn:hover{border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px)}\n    .mct-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}\n    .mct-btn.primary:hover{background:#1d4ed8;color:#fff}\n    .mct-btn.danger{color:#b91c1c;border-color:#fecaca;background:#fff}\n    .mct-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}\n    .mct-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:#f2f4f7;color:#344054;white-space:nowrap}\n    .mct-pill.ok{background:var(--green2);color:#166534}.mct-pill.err{background:var(--red2);color:#991b1b}.mct-pill.warn{background:var(--orange2);color:#9a3412}.mct-pill.blue{background:var(--blue2);color:#1e40af}\n    .mct-note{font-size:13px;color:#667085;background:#f9fafb;border:1px solid var(--line);border-radius:16px;padding:14px;line-height:1.6;margin-top:12px}\n    .mct-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}\n    .mct-mini{border:1px solid var(--line);background:#fbfdff;border-radius:16px;padding:14px;min-height:92px}\n    .mct-mini b{display:block;font-size:13px;margin-bottom:6px}.mct-mini code{font-size:12px;color:#667085;word-break:break-all;line-height:1.45}\n    .mct-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:#fff}\n    .mct-table{width:100%;border-collapse:collapse;min-width:720px;font-size:13px}\n    .mct-table th,.mct-table td{padding:12px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    .mct-table th{background:#f9fafb;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.06em}\n    .mct-table tr:last-child td{border-bottom:0}\n    .mct-log{background:#0f172a;color:#dbeafe;border-radius:18px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:520px;overflow:auto}\n    .mct-empty{border:1px dashed #cbd5e1;border-radius:18px;padding:24px;text-align:center;color:var(--muted);background:#fbfdff}\n    .mct-flow{display:flex;flex-direction:column;gap:10px;margin-top:10px}\n    .mct-step{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:16px;padding:12px}\n    .mct-step b{font-size:13px}.mct-step span{font-size:13px;color:var(--muted);word-break:break-word}\n    @media(max-width:920px){#momentry-core-test-page{padding:20px}.mct-header{flex-direction:column}.mct-status-grid,.mct-grid,.mct-mini-grid{grid-template-columns:1fr}.mct-step{grid-template-columns:1fr}.mct-title h1{font-size:24px}}\n  </style>\n\n  <div class=\"mct-header\">\n    <div class=\"mct-title\">\n      <h1>Momentry PHP → AI Core 測試頁</h1>\n      <p>這頁只做內部測試：確認 PHP Proxy 有沒有做好、AI Core 是否正常、回傳 contract 是否符合 HTML 前端需求。這裡完全不使用 n8n。</p>\n    </div>\n    <div class=\"mct-badge\">Internal Debug Page</div>\n  </div>\n\n  <div class=\"mct-status-grid\">\n    <div class=\"mct-status\"><label>PHP Proxy</label><strong id=\"mctProxyStatus\">—</strong><span id=\"mctProxySub\">尚未測試</span></div>\n    <div class=\"mct-status\"><label>AI Core</label><strong id=\"mctCoreStatus\">—</strong><span id=\"mctCoreSub\">尚未測試 /health</span></div>\n    <div class=\"mct-status\"><label>HTTP</label><strong id=\"mctHttpStatus\">—</strong><span id=\"mctHttpSub\">等待 API 回覆</span></div>\n    <div class=\"mct-status\"><label>Contract</label><strong id=\"mctContractScore\">—</strong><span id=\"mctContractSub\">尚未檢查</span></div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>1. PHP Proxy 設定</h2>\n    <p>HTML 只呼叫這支 PHP proxy。API Key 必須由 PHP 在 server 端補上，不要放在 HTML / JavaScript。</p>\n    <div class=\"mct-grid\">\n      <div class=\"mct-field\">\n        <label>PHP Proxy URL</label>\n        <input class=\"mct-input\" id=\"mctProxyUrl\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\">\n      </div>\n      <div class=\"mct-field\">\n        <label>Timeout</label>\n        <select class=\"mct-select\" id=\"mctTimeout\">\n          <option value=\"8000\">8 秒</option>\n          <option value=\"15000\" selected>15 秒</option>\n          <option value=\"30000\">30 秒</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"mct-note\">\n      判斷邏輯：如果 PHP 有回應但 Core HTTP 是 401，通常代表 PHP proxy 有通，但沒有正確帶上 <code>X-API-Key</code>，或 API Key 不正確。\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>2. 一鍵測整條鏈</h2>\n    <p>建議先按這個。它會依序測：PHP Proxy → AI Core Health → Videos → Files Scan。</p>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" id=\"mctFullTest\" onclick=\"MomentryCoreTest.fullTest(this)\">一鍵 Full Test</button>\n      <button class=\"mct-btn\" id=\"mctClearAll\" onclick=\"MomentryCoreTest.clear()\">清空結果</button>\n    </div>\n    <div class=\"mct-flow\" id=\"mctFlowBox\">\n      <div class=\"mct-step\"><b>Step 1</b><span>等待測試 PHP Proxy / Health</span><em class=\"mct-pill\">Pending</em></div>\n      <div class=\"mct-step\"><b>Step 2</b><span>等待測試 AI Core /videos</span><em class=\"mct-pill\">Pending</em></div>\n      <div class=\"mct-step\"><b>Step 3</b><span>等待測試 /files/scan</span><em class=\"mct-pill\">Pending</em></div>\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>3. 常用 API 快速測試</h2>\n    <p>這幾個按鈕可以快速確認 Core 是否正常、PHP 回傳格式是否正確。</p>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" onclick=\"MomentryCoreTest.quick(\'health\', this)\">檢查 /health</button>\n      <button class=\"mct-btn\" onclick=\"MomentryCoreTest.quick(\'videos\', this)\">取得 /api/v1/videos</button>\n      <button class=\"mct-btn\" onclick=\"MomentryCoreTest.quick(\'scan\', this)\">掃描 /api/v1/files/scan</button>\n      <button class=\"mct-btn\" onclick=\"MomentryCoreTest.quick(\'lookup\', this)\">Lookup UUID</button>\n      <button class=\"mct-btn\" onclick=\"MomentryCoreTest.quick(\'progress\', this)\">查詢 Progress</button>\n      <button class=\"mct-btn\" onclick=\"MomentryCoreTest.quick(\'search\', this)\">搜尋測試 /api/v1/search</button>\n    </div>\n    <div class=\"mct-grid\" style=\"margin-top:18px\">\n      <div class=\"mct-field\">\n        <label>UUID，用於 Lookup / Progress</label>\n        <input class=\"mct-input\" id=\"mctUuid\" value=\"384b0ff44aaaa1f1\" placeholder=\"video uuid / asset uuid\">\n      </div>\n      <div class=\"mct-field\">\n        <label>Search Query，用於搜尋測試</label>\n        <input class=\"mct-input\" id=\"mctQuery\" value=\"sun\" placeholder=\"sun / stamp / charles\">\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mct-card\">\n    <h2>4. 自訂 API 測試</h2>\n    <p>如果 Core 新增 endpoint，直接在這裡輸入 method、path、body 測試。</p>\n    <div class=\"mct-grid\">\n      <div class=\"mct-field\">\n        <label>Method</label>\n        <select class=\"mct-select\" id=\"mctMethod\">\n          <option>GET</option>\n          <option>POST</option>\n          <option>PATCH</option>\n          <option>DELETE</option>\n        </select>\n      </div>\n      <div class=\"mct-field\">\n        <label>Core Path</label>\n        <input class=\"mct-input\" id=\"mctPath\" value=\"/health\" placeholder=\"/api/v1/videos\">\n      </div>\n    </div>\n    <div class=\"mct-field\">\n      <label>Body JSON，GET 可留空</label>\n      <textarea class=\"mct-textarea\" id=\"mctBody\">{}</textarea>\n    </div>\n    <div class=\"mct-actions\">\n      <button class=\"mct-btn primary\" id=\"mctRunCustom\" onclick=\"MomentryCoreTest.custom(this)\">送出自訂 API</button>\n    </div>\n  </div>\n\n  <div class=\"mct-grid\">\n    <div class=\"mct-card\">\n      <h2>5. Contract 檢查</h2>\n      <p>檢查目前回覆是否符合前端預期欄位。</p>\n      <div class=\"mct-mini-grid\" id=\"mctContractSummary\">\n        <div class=\"mct-mini\"><b>Contract Type</b><code>尚未檢查</code></div>\n        <div class=\"mct-mini\"><b>Wrapper</b><code>尚未檢查</code></div>\n        <div class=\"mct-mini\"><b>Fields</b><code>尚未檢查</code></div>\n      </div>\n      <div style=\"margin-top:14px\" id=\"mctContractBox\"><div class=\"mct-empty\">尚未取得 API response。</div></div>\n    </div>\n\n    <div class=\"mct-card\">\n      <h2>6. Raw Response</h2>\n      <p>這裡最適合截圖或複製給 PHP / Core 同事。</p>\n      <div class=\"mct-log\" id=\"mctLog\">Ready.</div>\n    </div>\n  </div>\n\n  <script>\n  (function(){\n    \'use strict\';\n\n    var CONTRACTS = {\n      health:{\n        label:\'Health Contract\',\n        detect:function(d){ return d && (d.status || d.ok === true || d.message || d.version); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'status\',\'string\',false],\n          [\'message\',\'string\',false],\n          [\'version\',\'string\',false]\n        ]\n      },\n      search:{\n        label:\'Search Contract\',\n        detect:function(d){ return d && (Array.isArray(d.results) || Array.isArray(d.hits)); },\n        fields:[\n          [\'query\',\'string\',true],\n          [\'total\',\'number\',false,\'count\'],\n          [\'results\',\'array\',false,\'hits\'],\n          [\'results.0.moment_id\',\'string\',false,\'hits.0.id\'],\n          [\'results.0.video_id\',\'string\',false,\'hits.0.vid\'],\n          [\'results.0.t_start\',\'number\',false,\'hits.0.start\'],\n          [\'results.0.t_end\',\'number\',false,\'hits.0.end\'],\n          [\'results.0.title\',\'string\',false,\'hits.0.title\'],\n          [\'results.0.snippet\',\'string\',false,\'hits.0.text\'],\n          [\'results.0.score\',\'number\',false,\'hits.0.score\'],\n          [\'results.0.video_url\',\'string\',false,\'results.0.video_proxy_url\']\n        ]\n      },\n      videos:{\n        label:\'Videos Contract\',\n        detect:function(d){ return d && Array.isArray(d.videos); },\n        fields:[\n          [\'videos\',\'array\',true],\n          [\'videos.0.uuid\',\'string\',false,\'videos.0.video_id\'],\n          [\'videos.0.file_name\',\'string\',false,\'videos.0.title\'],\n          [\'videos.0.duration\',\'number\',false],\n          [\'videos.0.width\',\'number\',false],\n          [\'videos.0.height\',\'number\',false]\n        ]\n      },\n      lookup:{\n        label:\'Lookup / Source Contract\',\n        detect:function(d){ return d && (d.uuid || d.video_id || d.file_name || d.file_path || d.video_url); },\n        fields:[\n          [\'uuid\',\'string\',false,\'video_id\'],\n          [\'file_name\',\'string\',false,\'title\'],\n          [\'file_path\',\'string\',false,\'source_path\'],\n          [\'duration\',\'number\',false],\n          [\'width\',\'number\',false],\n          [\'height\',\'number\',false]\n        ]\n      },\n      progress:{\n        label:\'Progress Contract\',\n        detect:function(d){ return d && (\'progress\' in d || \'status\' in d || \'percent\' in d || \'ok\' in d); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'status\',\'string\',false],\n          [\'progress\',\'number\',false,\'percent\'],\n          [\'message\',\'string\',false]\n        ]\n      },\n      scan:{\n        label:\'Scan Contract\',\n        detect:function(d){ return d && (d.scanned || d.files || d.jobs || d.queued || d.ok === true); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'scanned\',\'number\',false],\n          [\'queued\',\'number\',false],\n          [\'files\',\'array\',false],\n          [\'jobs\',\'array\',false],\n          [\'message\',\'string\',false]\n        ]\n      },\n      error:{\n        label:\'Error Contract\',\n        detect:function(d){ return d && (d.ok === false || d.error || d.error_code || Number(d.http_code) >= 400); },\n        fields:[\n          [\'ok\',\'boolean\',false],\n          [\'http_code\',\'number\',false],\n          [\'error_code\',\'string\',false],\n          [\'message\',\'string\',false],\n          [\'trace_id\',\'string\',false],\n          [\'raw_response\',\'string\',false]\n        ]\n      }\n    };\n\n    function $(id){ return document.getElementById(id); }\n    function esc(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\n    function pretty(o){ try{return JSON.stringify(o,null,2);}catch(e){return String(o);} }\n    function now(){ return new Date().toLocaleString(\'zh-TW\',{hour12:false}); }\n    function proxy(){ return ($(\'mctProxyUrl\').value || \'\').trim(); }\n    function uuid(){ return ($(\'mctUuid\').value || \'\').trim(); }\n    function query(){ return ($(\'mctQuery\').value || \'\').trim() || \'sun\'; }\n    function enc(v){ return encodeURIComponent(v || \'\'); }\n\n    function setBtn(btn,on){\n      if(!btn) return;\n      if(on){ btn.dataset.text = btn.textContent; btn.textContent = \'測試中…\'; btn.disabled = true; }\n      else { btn.textContent = btn.dataset.text || btn.textContent; btn.disabled = false; }\n    }\n\n    function readBody(){\n      var txt = ($(\'mctBody\').value || \'\').trim();\n      if(!txt) return {};\n      return JSON.parse(txt);\n    }\n\n    function normalize(raw){\n      if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw || \'raw_response\' in raw)) return raw;\n      return { ok:true, http_code:200, data:raw, _wrapper:\'core_raw\' };\n    }\n\n    function getData(wrapped){\n      if(wrapped && typeof wrapped === \'object\' && \'data\' in wrapped && wrapped.data !== null) return wrapped.data;\n      return wrapped;\n    }\n\n    function getPath(obj,path){\n      var cur = obj;\n      String(path).split(\'.\').forEach(function(p){ if(cur != null) cur = cur[p]; });\n      return cur;\n    }\n\n    function typeOk(v,type){\n      if(v === undefined || v === null) return false;\n      if(type === \'array\') return Array.isArray(v);\n      if(type === \'number\') return typeof v === \'number\' && !isNaN(v);\n      return typeof v === type;\n    }\n\n    function detectContract(data, wrapped){\n      if(wrapped && CONTRACTS.error.detect(wrapped)) return \'error\';\n      if(!data || typeof data !== \'object\') return null;\n      if(CONTRACTS.error.detect(data)) return \'error\';\n      if(CONTRACTS.search.detect(data)) return \'search\';\n      if(CONTRACTS.videos.detect(data)) return \'videos\';\n      if(CONTRACTS.lookup.detect(data)) return \'lookup\';\n      if(CONTRACTS.progress.detect(data)) return \'progress\';\n      if(CONTRACTS.scan.detect(data)) return \'scan\';\n      if(CONTRACTS.health.detect(data)) return \'health\';\n      return null;\n    }\n\n    function wrapperLabel(wrapped){\n      if(!wrapped || typeof wrapped !== \'object\') return \'Unknown\';\n      if(\'data\' in wrapped && \'http_code\' in wrapped) return \'PHP normalized: { ok, http_code, data }\';\n      if(\'data\' in wrapped) return \'PHP wrapped: { data }\';\n      if(wrapped._wrapper === \'core_raw\') return \'Core raw response\';\n      return \'Unknown / direct response\';\n    }\n\n    function validate(wrapped){\n      var data = getData(wrapped);\n      var key = detectContract(data, wrapped);\n      var wrapper = wrapperLabel(wrapped);\n\n      if(!key){\n        $(\'mctContractScore\').textContent = \'未知\';\n        $(\'mctContractSub\').textContent = \'無法判斷 contract 類型\';\n        $(\'mctContractSummary\').innerHTML = summaryHtml(\'Unknown\', wrapper, \'0/0\');\n        $(\'mctContractBox\').innerHTML = \'<div class=\"mct-empty\">未知格式，請看 Raw Response。</div>\';\n        return;\n      }\n\n      var c = CONTRACTS[key];\n      var rows = c.fields.map(function(f){\n        var path = f[0], type = f[1], required = f[2], alt = f[3];\n        var value = getPath(data, path);\n        var ok = typeOk(value, type);\n        var usedAlt = false;\n        if(!ok && alt){\n          var altValue = getPath(data, alt);\n          if(typeOk(altValue, type)){ ok = true; value = altValue; usedAlt = true; }\n        }\n        return { path:path, type:type, required:required, alt:alt, value:value, ok:ok, usedAlt:usedAlt };\n      });\n\n      var pass = rows.filter(function(r){ return r.ok; }).length;\n      var requiredFail = rows.filter(function(r){ return r.required && !r.ok; }).length;\n      var score = rows.length ? Math.round(pass / rows.length * 100) : 0;\n\n      $(\'mctContractScore\').textContent = score + \'%\';\n      $(\'mctContractSub\').textContent = c.label + (requiredFail ? \'，必要欄位缺少\' : \'，格式可接受\');\n      $(\'mctContractSummary\').innerHTML = summaryHtml(c.label, wrapper, pass + \'/\' + rows.length + \' fields\');\n\n      $(\'mctContractBox\').innerHTML =\n        \'<div style=\"margin-bottom:12px\"><span class=\"mct-pill \' + (requiredFail ? \'err\' : (score >= 80 ? \'ok\' : \'warn\')) + \'\">\' + esc(c.label) + \'</span> <span class=\"mct-pill blue\">\' + score + \'% Pass</span></div>\' +\n        \'<div class=\"mct-table-wrap\"><table class=\"mct-table\"><thead><tr><th>Status</th><th>Field</th><th>Type</th><th>Required</th></tr></thead><tbody>\' +\n        rows.map(function(r){\n          var name = r.path + (r.usedAlt ? \' ← \' + r.alt : (r.alt ? \' / alt: \' + r.alt : \'\'));\n          return \'<tr>\' +\n            \'<td><span class=\"mct-pill \' + (r.ok ? \'ok\' : (r.required ? \'err\' : \'warn\')) + \'\">\' + (r.ok ? \'OK\' : \'Missing\') + \'</span></td>\' +\n            \'<td><code>\' + esc(name) + \'</code></td>\' +\n            \'<td>\' + esc(r.type) + \'</td>\' +\n            \'<td>\' + (r.required ? \'Yes\' : \'No\') + \'</td>\' +\n          \'</tr>\';\n        }).join(\'\') +\n        \'</tbody></table></div>\';\n    }\n\n    function summaryHtml(type, wrapper, fields){\n      return \'<div class=\"mct-mini\"><b>Contract Type</b><code>\' + esc(type) + \'</code></div>\' +\n             \'<div class=\"mct-mini\"><b>Wrapper</b><code>\' + esc(wrapper) + \'</code></div>\' +\n             \'<div class=\"mct-mini\"><b>Fields</b><code>\' + esc(fields) + \'</code></div>\';\n    }\n\n    function log(title,obj){\n      $(\'mctLog\').textContent = \'[\' + now() + \'] \' + title + \'\\n\' + pretty(obj);\n    }\n\n    function setStep(index, label, detail, status){\n      var cls = status === \'OK\' ? \'ok\' : (status === \'FAIL\' ? \'err\' : (status === \'WARN\' ? \'warn\' : \'\'));\n      var steps = $(\'mctFlowBox\').querySelectorAll(\'.mct-step\');\n      if(!steps[index]) return;\n      steps[index].innerHTML = \'<b>\' + esc(label) + \'</b><span>\' + esc(detail) + \'</span><em class=\"mct-pill \' + cls + \'\">\' + esc(status) + \'</em>\';\n    }\n\n    function updateHttpStatus(wrapped, res, method, path, ms){\n      var http = Number(wrapped && wrapped.http_code ? wrapped.http_code : res.status);\n      $(\'mctHttpStatus\').textContent = String(http || \'—\');\n      $(\'mctHttpSub\').textContent = method + \' \' + path + \' · \' + ms + \' ms\';\n\n      if(http === 401){\n        $(\'mctProxyStatus\').textContent = \'KEY?\';\n        $(\'mctProxySub\').textContent = \'PHP 有回應，但 Core 回 401，請檢查 X-API-Key\';\n      }else if(res.ok){\n        $(\'mctProxyStatus\').textContent = \'OK\';\n        $(\'mctProxySub\').textContent = \'PHP proxy 有正常回應\';\n      }else{\n        $(\'mctProxyStatus\').textContent = \'FAIL\';\n        $(\'mctProxySub\').textContent = \'PHP proxy HTTP \' + res.status;\n      }\n    }\n\n    async function callCore(method, path, body, btn, silent){\n      setBtn(btn, true);\n      var started = performance.now();\n      try{\n        var controller = new AbortController();\n        var timer = setTimeout(function(){ controller.abort(); }, Number($(\'mctTimeout\').value || 15000));\n        var payload = { method:method, path:path };\n        if(body !== undefined && body !== null) payload.body = body;\n\n        var res = await fetch(proxy(), {\n          method:\'POST\',\n          headers:{ \'Content-Type\':\'application/json\' },\n          body:JSON.stringify(payload),\n          signal:controller.signal\n        });\n        clearTimeout(timer);\n\n        var text = await res.text();\n        var json;\n        try{ json = text ? JSON.parse(text) : null; }\n        catch(e){ json = { raw_response:text }; }\n\n        var wrapped = normalize(json);\n        var ms = Math.round(performance.now() - started);\n\n        updateHttpStatus(wrapped, res, method, path, ms);\n\n        if(path === \'/health\'){\n          var http = Number(wrapped.http_code || res.status || 0);\n          var coreOk = res.ok && http < 400 && wrapped.ok !== false;\n          $(\'mctCoreStatus\').textContent = coreOk ? \'OK\' : \'FAIL\';\n          $(\'mctCoreSub\').textContent = http === 401 ? \'Core 回 401，請檢查 PHP 是否帶 API Key\' : (coreOk ? \'AI Core 正常回應\' : \'AI Core 或 PHP proxy 異常\');\n        }\n\n        log(method + \' \' + path, wrapped);\n        validate(wrapped);\n        return { ok:res.ok && Number(wrapped.http_code || res.status || 200) < 400 && wrapped.ok !== false, wrapped:wrapped, status:Number(wrapped.http_code || res.status || 0) };\n      }catch(e){\n        var err = { ok:false, error:e.name === \'AbortError\' ? \'TIMEOUT\' : e.message, method:method, path:path };\n        $(\'mctProxyStatus\').textContent = \'FAIL\';\n        $(\'mctProxySub\').textContent = err.error;\n        $(\'mctHttpStatus\').textContent = e.name === \'AbortError\' ? \'timeout\' : \'error\';\n        $(\'mctHttpSub\').textContent = method + \' \' + path;\n        log(method + \' \' + path, err);\n        validate(err);\n        return { ok:false, wrapped:err, status:0 };\n      }finally{\n        setBtn(btn, false);\n      }\n    }\n\n    async function runFullTest(btn){\n      setBtn(btn, true);\n      setStep(0, \'Step 1\', \'測試 /health 中...\', \'RUN\');\n      setStep(1, \'Step 2\', \'等待測試 /videos\', \'Pending\');\n      setStep(2, \'Step 3\', \'等待測試 /files/scan\', \'Pending\');\n\n      var r1 = await callCore(\'GET\', \'/health\', null, null, true);\n      setStep(0, \'Step 1\', r1.ok ? \'PHP Proxy 與 AI Core /health 正常\' : (\'/health 失敗，HTTP \' + (r1.status || \'error\')), r1.ok ? \'OK\' : \'FAIL\');\n      if(!r1.ok){ setBtn(btn, false); return; }\n\n      setStep(1, \'Step 2\', \'測試 /api/v1/videos 中...\', \'RUN\');\n      var r2 = await callCore(\'GET\', \'/api/v1/videos\', null, null, true);\n      setStep(1, \'Step 2\', r2.ok ? \'/videos 正常回應\' : (\'/videos 失敗，HTTP \' + (r2.status || \'error\')), r2.ok ? \'OK\' : \'FAIL\');\n\n      setStep(2, \'Step 3\', \'測試 /api/v1/files/scan 中...\', \'RUN\');\n      var r3 = await callCore(\'GET\', \'/api/v1/files/scan\', null, null, true);\n      setStep(2, \'Step 3\', r3.ok ? \'/files/scan 正常回應\' : (\'/files/scan 失敗，HTTP \' + (r3.status || \'error\')), r3.ok ? \'OK\' : \'FAIL\');\n\n      setBtn(btn, false);\n    }\n\n    window.MomentryCoreTest = {\n      quick:function(q, btn){\n        if(q === \'health\') return callCore(\'GET\', \'/health\', null, btn);\n        if(q === \'videos\') return callCore(\'GET\', \'/api/v1/videos\', null, btn);\n        if(q === \'scan\') return callCore(\'GET\', \'/api/v1/files/scan\', null, btn);\n        if(q === \'lookup\') return callCore(\'GET\', \'/api/v1/lookup?uuid=\' + enc(uuid()), null, btn);\n        if(q === \'progress\') return callCore(\'GET\', \'/api/v1/progress/\' + enc(uuid()), null, btn);\n        if(q === \'search\') return callCore(\'POST\', \'/api/v1/search\', { query:query(), limit:5 }, btn);\n      },\n      custom:function(btn){\n        var method = $(\'mctMethod\').value;\n        var path = $(\'mctPath\').value.trim();\n        var body = null;\n        try{ if(method !== \'GET\') body = readBody(); }\n        catch(e){ alert(\'Body JSON 格式錯誤：\' + e.message); return; }\n        return callCore(method, path, body, btn);\n      },\n      fullTest:function(btn){ return runFullTest(btn); },\n      clear:function(){\n      $(\'mctLog\').textContent = \'Ready.\';\n      $(\'mctProxyStatus\').textContent = \'—\';\n      $(\'mctProxySub\').textContent = \'尚未測試\';\n      $(\'mctCoreStatus\').textContent = \'—\';\n      $(\'mctCoreSub\').textContent = \'尚未測試 /health\';\n      $(\'mctHttpStatus\').textContent = \'—\';\n      $(\'mctHttpSub\').textContent = \'等待 API 回覆\';\n      $(\'mctContractScore\').textContent = \'—\';\n      $(\'mctContractSub\').textContent = \'尚未檢查\';\n      $(\'mctContractSummary\').innerHTML = summaryHtml(\'尚未檢查\',\'尚未檢查\',\'尚未檢查\');\n      $(\'mctContractBox\').innerHTML = \'<div class=\"mct-empty\">尚未取得 API response。</div>\';\n      setStep(0, \'Step 1\', \'等待測試 PHP Proxy / Health\', \'Pending\');\n      setStep(1, \'Step 2\', \'等待測試 AI Core /videos\', \'Pending\');\n      setStep(2, \'Step 3\', \'等待測試 /files/scan\', \'Pending\');\n      }\n    };\n  })();\n  </script>\n</div>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:07:55','2026-05-02 13:07:55','',1416,'https://wp.momentry.ddns.net/?p=1426',0,'revision','',0),
(1427,1,'2026-05-02 13:11:25','2026-05-02 13:11:25','<!-- wp:html -->\n<!--\nMomentry PHP → AI Core Test Page\n用途：確認 WordPress PHP proxy 是否正常、AI Core 是否正常、回傳 contract 是否正確。\n\n架構：HTML → PHP Proxy → AI Core\n不使用 n8n。\n不要把 API Key 放在 HTML。\n\nPHP Proxy 建議：\nPOST /wp-admin/admin-ajax.php?action=momentry_core_proxy\nBody:\n{\n  \"method\": \"GET\",\n  \"path\": \"/health\",\n  \"body\": {}\n}\n\nPHP Proxy 建議回傳：\n{\n  \"ok\": true,\n  \"core_url\": \"https://api.momentry.ddns.net/health\",\n  \"http_code\": 200,\n  \"data\": {...},\n  \"raw_response\": \"\"\n}\n-->\n\n<div id=\"momentry-core-test\" style=\"max-width:1100px;margin:0 auto;padding:28px;border-radius:24px;background:#f6f8fc;border:1px solid #e4e9f2;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',\'Noto Sans TC\',\'Microsoft JhengHei\',Arial,sans-serif;color:#172033;\">\n  <style>\n    #momentry-core-test *{box-sizing:border-box}\n    #momentry-core-test h1{font-size:28px;margin:0 0 8px;letter-spacing:-.04em}\n    #momentry-core-test h2{font-size:18px;margin:0 0 8px;letter-spacing:-.02em}\n    #momentry-core-test p{color:#667085;line-height:1.6;margin:0 0 16px;font-size:14px}\n    #momentry-core-test .card{background:#fff;border:1px solid #e4e9f2;border-radius:20px;padding:20px;margin:0 0 16px;box-shadow:0 10px 30px rgba(16,24,40,.05)}\n    #momentry-core-test .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n    #momentry-core-test .status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}\n    #momentry-core-test .status{background:#fff;border:1px solid #e4e9f2;border-radius:18px;padding:15px;min-height:100px}\n    #momentry-core-test .status label{display:block;color:#667085;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}\n    #momentry-core-test .status strong{display:block;font-size:24px;margin-bottom:6px}\n    #momentry-core-test .status span{display:block;color:#667085;font-size:12px;line-height:1.4;word-break:break-word}\n    #momentry-core-test .field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}\n    #momentry-core-test .field label{font-size:13px;font-weight:800;color:#344054}\n    #momentry-core-test input,#momentry-core-test select,#momentry-core-test textarea{width:100%;border:1px solid #d8dfeb;border-radius:14px;padding:11px 12px;font:inherit;font-size:14px;outline:none;background:#fff;color:#172033}\n    #momentry-core-test textarea{min-height:90px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;resize:vertical}\n    #momentry-core-test button{appearance:none;border:1px solid #d8dfeb;background:#fff;color:#263244;border-radius:14px;padding:11px 15px;font-size:14px;font-weight:800;cursor:pointer;min-height:44px;margin:0 8px 8px 0}\n    #momentry-core-test button:hover{border-color:#bfdbfe;color:#1d4ed8}\n    #momentry-core-test button.primary{background:#2563eb;border-color:#2563eb;color:#fff}\n    #momentry-core-test button.primary:hover{background:#1d4ed8;color:#fff}\n    #momentry-core-test button:disabled{opacity:.55;cursor:not-allowed}\n    #momentry-core-test .pill{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:#f2f4f7;color:#344054;white-space:nowrap}\n    #momentry-core-test .ok{background:#ecfdf3;color:#166534}\n    #momentry-core-test .err{background:#fff1f1;color:#991b1b}\n    #momentry-core-test .warn{background:#fff7ed;color:#9a3412}\n    #momentry-core-test .blue{background:#eef4ff;color:#1e40af}\n    #momentry-core-test .log{background:#0f172a;color:#dbeafe;border-radius:18px;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:520px;overflow:auto}\n    #momentry-core-test .table-wrap{overflow:auto;border:1px solid #e4e9f2;border-radius:16px;background:#fff}\n    #momentry-core-test table{width:100%;border-collapse:collapse;min-width:640px;font-size:13px}\n    #momentry-core-test th,#momentry-core-test td{padding:11px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top}\n    #momentry-core-test th{background:#f9fafb;color:#667085;font-size:11px;text-transform:uppercase;letter-spacing:.06em}\n    #momentry-core-test .empty{border:1px dashed #cbd5e1;border-radius:16px;padding:22px;text-align:center;color:#667085;background:#fbfdff}\n    #momentry-core-test .note{font-size:13px;color:#667085;background:#f9fafb;border:1px solid #e4e9f2;border-radius:16px;padding:13px;line-height:1.6;margin-top:10px}\n    @media(max-width:850px){#momentry-core-test{padding:18px!important}#momentry-core-test .grid,#momentry-core-test .status-grid{grid-template-columns:1fr}#momentry-core-test h1{font-size:24px}}\n  </style>\n\n  <h1>Momentry PHP → AI Core 測試頁</h1>\n  <p>用來確認 PHP Proxy 是否有做好、AI Core 是否正常、回傳 contract 是否正確。這頁不使用 n8n。</p>\n\n  <div class=\"status-grid\">\n    <div class=\"status\"><label>JS</label><strong id=\"mctJs\">Not Ready</strong><span id=\"mctJsSub\">如果一直是 Not Ready，代表 WordPress 擋掉 script。</span></div>\n    <div class=\"status\"><label>PHP Proxy</label><strong id=\"mctProxy\">—</strong><span id=\"mctProxySub\">尚未測試</span></div>\n    <div class=\"status\"><label>AI Core</label><strong id=\"mctCore\">—</strong><span id=\"mctCoreSub\">尚未測試 /health</span></div>\n    <div class=\"status\"><label>HTTP</label><strong id=\"mctHttp\">—</strong><span id=\"mctHttpSub\">等待 API 回覆</span></div>\n  </div>\n\n  <div class=\"card\">\n    <h2>1. Proxy 設定</h2>\n    <div class=\"grid\">\n      <div class=\"field\">\n        <label>PHP Proxy URL</label>\n        <input id=\"mctProxyUrl\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\">\n      </div>\n      <div class=\"field\">\n        <label>Timeout</label>\n        <select id=\"mctTimeout\">\n          <option value=\"8000\">8 秒</option>\n          <option value=\"15000\" selected>15 秒</option>\n          <option value=\"30000\">30 秒</option>\n        </select>\n      </div>\n    </div>\n    <div class=\"note\">如果按鈕完全沒反應，先看上方 JS 是否顯示 Ready。若不是 Ready，表示 WordPress 目前不允許這段 HTML 裡的 JavaScript 執行。</div>\n  </div>\n\n  <div class=\"card\">\n    <h2>2. 快速測試</h2>\n    <p>建議先按「測 /health」。如果回 401，通常代表 PHP proxy 有通，但沒有正確帶上 X-API-Key。</p>\n    <button class=\"primary\" onclick=\"MCT_runQuick(\'health\', this)\">測 /health</button>\n    <button onclick=\"MCT_runQuick(\'videos\', this)\">測 /api/v1/videos</button>\n    <button onclick=\"MCT_runQuick(\'scan\', this)\">測 /api/v1/files/scan</button>\n    <button onclick=\"MCT_runQuick(\'lookup\', this)\">測 lookup</button>\n    <button onclick=\"MCT_runQuick(\'progress\', this)\">測 progress</button>\n    <button onclick=\"MCT_runQuick(\'search\', this)\">測 search</button>\n    <button onclick=\"MCT_fullTest(this)\">一鍵 Full Test</button>\n    <button onclick=\"MCT_clear()\">清空</button>\n\n    <div class=\"grid\" style=\"margin-top:16px\">\n      <div class=\"field\">\n        <label>UUID，用於 lookup / progress</label>\n        <input id=\"mctUuid\" value=\"384b0ff44aaaa1f1\">\n      </div>\n      <div class=\"field\">\n        <label>Search Query</label>\n        <input id=\"mctQuery\" value=\"sun\">\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card\">\n    <h2>3. 自訂 API 測試</h2>\n    <div class=\"grid\">\n      <div class=\"field\">\n        <label>Method</label>\n        <select id=\"mctMethod\">\n          <option>GET</option>\n          <option>POST</option>\n          <option>PATCH</option>\n          <option>DELETE</option>\n        </select>\n      </div>\n      <div class=\"field\">\n        <label>Core Path</label>\n        <input id=\"mctPath\" value=\"/health\" placeholder=\"/api/v1/videos\">\n      </div>\n    </div>\n    <div class=\"field\">\n      <label>Body JSON，GET 可留空</label>\n      <textarea id=\"mctBody\">{}</textarea>\n    </div>\n    <button class=\"primary\" onclick=\"MCT_custom(this)\">送出自訂 API</button>\n  </div>\n\n  <div class=\"grid\">\n    <div class=\"card\">\n      <h2>4. Contract 檢查</h2>\n      <p id=\"mctContractSummary\">尚未檢查。</p>\n      <div id=\"mctContractBox\" class=\"empty\">尚未取得 API response。</div>\n    </div>\n\n    <div class=\"card\">\n      <h2>5. Raw Response</h2>\n      <div id=\"mctLog\" class=\"log\">Ready.</div>\n    </div>\n  </div>\n</div>\n\n<script>\n(function(){\n  \'use strict\';\n\n  function byId(id){ return document.getElementById(id); }\n  function esc(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\n  function pretty(o){ try { return JSON.stringify(o, null, 2); } catch(e) { return String(o); } }\n  function enc(v){ return encodeURIComponent(v || \'\'); }\n  function proxy(){ return (byId(\'mctProxyUrl\').value || \'\').trim(); }\n  function uuid(){ return (byId(\'mctUuid\').value || \'\').trim(); }\n  function query(){ return (byId(\'mctQuery\').value || \'\').trim() || \'sun\'; }\n  function timeout(){ return Number(byId(\'mctTimeout\').value || 15000); }\n\n  function setText(id, text){ var el = byId(id); if(el) el.textContent = text; }\n\n  function setBtn(btn, loading){\n    if(!btn) return;\n    if(loading){ btn.dataset.old = btn.textContent; btn.textContent = \'測試中…\'; btn.disabled = true; }\n    else { btn.textContent = btn.dataset.old || btn.textContent; btn.disabled = false; }\n  }\n\n  function normalize(raw){\n    if(raw && typeof raw === \'object\' && (\'data\' in raw || \'http_code\' in raw || \'ok\' in raw || \'raw_response\' in raw)) return raw;\n    return { ok:true, http_code:200, data:raw, _note:\'Core raw response wrapped by test page\' };\n  }\n\n  function getData(wrapped){\n    if(wrapped && typeof wrapped === \'object\' && \'data\' in wrapped && wrapped.data !== null) return wrapped.data;\n    return wrapped;\n  }\n\n  function getPath(obj, path){\n    var cur = obj;\n    String(path).split(\'.\').forEach(function(p){ if(cur != null) cur = cur[p]; });\n    return cur;\n  }\n\n  function typeOk(v, type){\n    if(v === undefined || v === null) return false;\n    if(type === \'array\') return Array.isArray(v);\n    if(type === \'number\') return typeof v === \'number\' && !isNaN(v);\n    return typeof v === type;\n  }\n\n  var contracts = {\n    health: {\n      label:\'Health\',\n      detect:function(d){ return d && (d.ok === true || d.status || d.message || d.version); },\n      fields:[[\'ok\',\'boolean\',false],[\'status\',\'string\',false],[\'message\',\'string\',false],[\'version\',\'string\',false]]\n    },\n    videos: {\n      label:\'Videos\',\n      detect:function(d){ return d && Array.isArray(d.videos); },\n      fields:[[\'videos\',\'array\',true],[\'videos.0.uuid\',\'string\',false],[\'videos.0.file_name\',\'string\',false],[\'videos.0.duration\',\'number\',false]]\n    },\n    search: {\n      label:\'Search\',\n      detect:function(d){ return d && (Array.isArray(d.results) || Array.isArray(d.hits)); },\n      fields:[[\'query\',\'string\',true],[\'total\',\'number\',false,\'count\'],[\'results\',\'array\',false,\'hits\'],[\'results.0.moment_id\',\'string\',false,\'hits.0.id\'],[\'results.0.video_id\',\'string\',false,\'hits.0.vid\'],[\'results.0.t_start\',\'number\',false,\'hits.0.start\'],[\'results.0.t_end\',\'number\',false,\'hits.0.end\'],[\'results.0.title\',\'string\',false,\'hits.0.title\'],[\'results.0.snippet\',\'string\',false,\'hits.0.text\'],[\'results.0.score\',\'number\',false,\'hits.0.score\'],[\'results.0.video_url\',\'string\',false,\'results.0.video_proxy_url\']]\n    },\n    progress: {\n      label:\'Progress\',\n      detect:function(d){ return d && (\'progress\' in d || \'percent\' in d || \'status\' in d); },\n      fields:[[\'status\',\'string\',false],[\'progress\',\'number\',false,\'percent\'],[\'message\',\'string\',false]]\n    },\n    error: {\n      label:\'Error\',\n      detect:function(d){ return d && (d.ok === false || d.error || d.error_code || Number(d.http_code) >= 400); },\n      fields:[[\'ok\',\'boolean\',false],[\'http_code\',\'number\',false],[\'error_code\',\'string\',false],[\'message\',\'string\',false],[\'raw_response\',\'string\',false]]\n    }\n  };\n\n  function detectContract(data, wrapped){\n    if(contracts.error.detect(wrapped)) return \'error\';\n    if(!data || typeof data !== \'object\') return null;\n    if(contracts.error.detect(data)) return \'error\';\n    if(contracts.search.detect(data)) return \'search\';\n    if(contracts.videos.detect(data)) return \'videos\';\n    if(contracts.progress.detect(data)) return \'progress\';\n    if(contracts.health.detect(data)) return \'health\';\n    return null;\n  }\n\n  function validate(wrapped){\n    var data = getData(wrapped);\n    var key = detectContract(data, wrapped);\n    if(!key){\n      setText(\'mctContractSummary\',\'未知格式，請看 Raw Response。\');\n      byId(\'mctContractBox\').innerHTML = \'<div class=\"empty\">未知格式。</div>\';\n      return;\n    }\n\n    var c = contracts[key];\n    var rows = c.fields.map(function(f){\n      var path = f[0], type = f[1], required = f[2], alt = f[3];\n      var value = getPath(data, path);\n      var ok = typeOk(value, type);\n      var usedAlt = false;\n      if(!ok && alt){\n        var altValue = getPath(data, alt);\n        if(typeOk(altValue, type)){ ok = true; usedAlt = true; }\n      }\n      return { path:path, alt:alt, type:type, required:required, ok:ok, usedAlt:usedAlt };\n    });\n\n    var pass = rows.filter(function(r){ return r.ok; }).length;\n    var requiredFail = rows.filter(function(r){ return r.required && !r.ok; }).length;\n    var score = rows.length ? Math.round(pass / rows.length * 100) : 0;\n    setText(\'mctContractSummary\', c.label + \' Contract：\' + score + \'% pass，\' + pass + \'/\' + rows.length + \' fields。\' + (requiredFail ? \' 必要欄位缺少。\' : \'\'));\n\n    byId(\'mctContractBox\').innerHTML = \'<div class=\"table-wrap\"><table><thead><tr><th>Status</th><th>Field</th><th>Type</th><th>Required</th></tr></thead><tbody>\' +\n      rows.map(function(r){\n        var cls = r.ok ? \'ok\' : (r.required ? \'err\' : \'warn\');\n        var name = r.path + (r.usedAlt ? \' ← \' + r.alt : (r.alt ? \' / alt: \' + r.alt : \'\'));\n        return \'<tr><td><span class=\"pill \' + cls + \'\">\' + (r.ok ? \'OK\' : \'Missing\') + \'</span></td><td><code>\' + esc(name) + \'</code></td><td>\' + esc(r.type) + \'</td><td>\' + (r.required ? \'Yes\' : \'No\') + \'</td></tr>\';\n      }).join(\'\') +\n      \'</tbody></table></div>\';\n  }\n\n  function log(title, obj){\n    byId(\'mctLog\').textContent = \'[\' + new Date().toLocaleString(\'zh-TW\', {hour12:false}) + \'] \' + title + \'\\n\' + pretty(obj);\n  }\n\n  async function callCore(method, path, body, btn){\n    setBtn(btn, true);\n    var started = performance.now();\n    try{\n      var controller = new AbortController();\n      var timer = setTimeout(function(){ controller.abort(); }, timeout());\n      var payload = { method:method, path:path };\n      if(body !== null && body !== undefined) payload.body = body;\n\n      var res = await fetch(proxy(), {\n        method:\'POST\',\n        headers:{ \'Content-Type\':\'application/json\' },\n        body:JSON.stringify(payload),\n        signal:controller.signal\n      });\n      clearTimeout(timer);\n\n      var text = await res.text();\n      var json;\n      try { json = text ? JSON.parse(text) : null; }\n      catch(e) { json = { raw_response:text }; }\n\n      var wrapped = normalize(json);\n      var ms = Math.round(performance.now() - started);\n      var http = Number(wrapped.http_code || res.status || 0);\n\n      setText(\'mctProxy\', res.ok ? \'OK\' : \'FAIL\');\n      setText(\'mctProxySub\', \'PHP proxy 有回應，\' + ms + \' ms\');\n      setText(\'mctHttp\', String(http || \'—\'));\n      setText(\'mctHttpSub\', method + \' \' + path);\n\n      if(http === 401){\n        setText(\'mctProxy\', \'KEY?\');\n        setText(\'mctProxySub\', \'PHP 有回應，但 Core 回 401。請檢查 PHP 是否有帶 X-API-Key。\');\n      }\n\n      if(path === \'/health\'){\n        var coreOk = res.ok && http < 400 && wrapped.ok !== false;\n        setText(\'mctCore\', coreOk ? \'OK\' : \'FAIL\');\n        setText(\'mctCoreSub\', http === 401 ? \'Core 回 401，請檢查 API Key。\' : (coreOk ? \'AI Core 正常\' : \'AI Core 或 PHP proxy 異常\'));\n      }\n\n      log(method + \' \' + path, wrapped);\n      validate(wrapped);\n      return { ok:res.ok && http < 400 && wrapped.ok !== false, http:http, data:wrapped };\n    }catch(e){\n      var err = { ok:false, error:e.name === \'AbortError\' ? \'TIMEOUT\' : e.message, method:method, path:path };\n      setText(\'mctProxy\', \'FAIL\');\n      setText(\'mctProxySub\', err.error);\n      setText(\'mctHttp\', e.name === \'AbortError\' ? \'timeout\' : \'error\');\n      setText(\'mctHttpSub\', method + \' \' + path);\n      log(method + \' \' + path, err);\n      validate(err);\n      return { ok:false, http:0, data:err };\n    }finally{\n      setBtn(btn, false);\n    }\n  }\n\n  window.MCT_runQuick = function(type, btn){\n    if(type === \'health\') return callCore(\'GET\', \'/health\', null, btn);\n    if(type === \'videos\') return callCore(\'GET\', \'/api/v1/videos\', null, btn);\n    if(type === \'scan\') return callCore(\'GET\', \'/api/v1/files/scan\', null, btn);\n    if(type === \'lookup\') return callCore(\'GET\', \'/api/v1/lookup?uuid=\' + enc(uuid()), null, btn);\n    if(type === \'progress\') return callCore(\'GET\', \'/api/v1/progress/\' + enc(uuid()), null, btn);\n    if(type === \'search\') return callCore(\'POST\', \'/api/v1/search\', { query:query(), limit:5 }, btn);\n  };\n\n  window.MCT_custom = function(btn){\n    var method = byId(\'mctMethod\').value;\n    var path = byId(\'mctPath\').value.trim();\n    var body = null;\n    try{\n      if(method !== \'GET\') body = JSON.parse((byId(\'mctBody\').value || \'{}\').trim() || \'{}\');\n    }catch(e){\n      alert(\'Body JSON 格式錯誤：\' + e.message);\n      return;\n    }\n    return callCore(method, path, body, btn);\n  };\n\n  window.MCT_fullTest = async function(btn){\n    await callCore(\'GET\', \'/health\', null, btn);\n    await callCore(\'GET\', \'/api/v1/videos\', null, btn);\n    await callCore(\'GET\', \'/api/v1/files/scan\', null, btn);\n  };\n\n  window.MCT_clear = function(){\n    setText(\'mctProxy\',\'—\'); setText(\'mctProxySub\',\'尚未測試\');\n    setText(\'mctCore\',\'—\'); setText(\'mctCoreSub\',\'尚未測試 /health\');\n    setText(\'mctHttp\',\'—\'); setText(\'mctHttpSub\',\'等待 API 回覆\');\n    setText(\'mctContractSummary\',\'尚未檢查。\');\n    byId(\'mctContractBox\').innerHTML = \'尚未取得 API response。\';\n    byId(\'mctLog\').textContent = \'Ready.\';\n  };\n\n  setText(\'mctJs\',\'Ready\');\n  setText(\'mctJsSub\',\'JavaScript 已成功載入，按鈕應該可以點。\');\n})();\n</script>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:11:25','2026-05-02 13:11:25','',1416,'https://wp.momentry.ddns.net/?p=1427',0,'revision','',0),
(1428,1,'2026-05-02 13:14:46','2026-05-02 13:14:46','<!-- wp:html -->\n<!--\nMomentry Mini PHP Proxy Test HTML\n用途：小型測試頁，用來確認 PHP proxy 是否能轉接 AI Core。\n\n架構：HTML → PHP Proxy → AI Core\n不使用 n8n。\n不要把 API Key 放在 HTML。\n\n注意：如果 WordPress HTML 區塊會擋 <script>，請改放在：\n1. PHP shortcode\n2. Code Snippets\n3. theme template\n4. 允許 JavaScript 的自訂頁面\n-->\n\n<div id=\"momentry-mini-test\" style=\"max-width:760px;margin:0 auto;padding:22px;border:1px solid #e5eaf2;border-radius:18px;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',\'Noto Sans TC\',\'Microsoft JhengHei\',Arial,sans-serif;color:#172033;\">\n  <h2 style=\"margin:0 0 8px;font-size:22px;letter-spacing:-.03em;\">Momentry PHP Proxy Mini Test</h2>\n  <p style=\"margin:0 0 18px;color:#667085;line-height:1.6;font-size:14px;\">\n    用來快速確認 PHP proxy 是否正常轉接 AI Core。HTML 不放 API Key，API Key 由 PHP 加上。\n  </p>\n\n  <div style=\"margin-bottom:14px;\">\n    <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">PHP Proxy URL</label>\n    <input id=\"mmt_proxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n  </div>\n\n  <div style=\"margin-bottom:14px;\">\n    <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">UUID，用於 lookup 測試</label>\n    <input id=\"mmt_uuid\" value=\"384b0ff44aaaa1f1\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n  </div>\n\n  <div style=\"display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;\">\n    <button onclick=\"MMT_call(\'GET\',\'/health\',null,this)\" style=\"padding:10px 14px;border:0;border-radius:12px;background:#2563eb;color:white;font-weight:700;cursor:pointer;\">Test /health</button>\n    <button onclick=\"MMT_call(\'GET\',\'/api/v1/videos\',null,this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">Test /videos</button>\n    <button onclick=\"MMT_lookup(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">Test lookup</button>\n    <button onclick=\"MMT_clear()\" style=\"padding:10px 14px;border:1px solid #fecaca;border-radius:12px;background:white;color:#b91c1c;font-weight:700;cursor:pointer;\">Clear</button>\n  </div>\n\n  <div id=\"mmt_status\" style=\"margin-bottom:10px;padding:10px 12px;border-radius:12px;background:white;border:1px solid #e5eaf2;font-size:13px;color:#667085;\">\n    Ready. 請按上方按鈕測試。\n  </div>\n\n  <pre id=\"mmt_result\" style=\"margin:0;padding:14px;border-radius:14px;background:#0f172a;color:#dbeafe;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto;\">No response yet.</pre>\n</div>\n\n<script>\nfunction MMT_get(id){ return document.getElementById(id); }\nfunction MMT_proxy(){ return MMT_get(\'mmt_proxy\').value.trim(); }\nfunction MMT_setStatus(text){ MMT_get(\'mmt_status\').textContent = text; }\nfunction MMT_print(obj){\n  try { MMT_get(\'mmt_result\').textContent = JSON.stringify(obj, null, 2); }\n  catch(e){ MMT_get(\'mmt_result\').textContent = String(obj); }\n}\nfunction MMT_setLoading(btn, loading){\n  if(!btn) return;\n  if(loading){ btn.dataset.oldText = btn.textContent; btn.textContent = \'Testing...\'; btn.disabled = true; }\n  else { btn.textContent = btn.dataset.oldText || btn.textContent; btn.disabled = false; }\n}\nasync function MMT_call(method, path, body, btn){\n  MMT_setLoading(btn, true);\n  MMT_setStatus(\'Calling PHP proxy → \' + method + \' \' + path);\n  try{\n    var payload = { method: method, path: path };\n    if(body !== null && body !== undefined) payload.body = body;\n\n    var res = await fetch(MMT_proxy(), {\n      method: \'POST\',\n      headers: { \'Content-Type\': \'application/json\' },\n      body: JSON.stringify(payload)\n    });\n\n    var text = await res.text();\n    var json;\n    try { json = text ? JSON.parse(text) : null; }\n    catch(e){ json = { raw_response: text }; }\n\n    MMT_setStatus(\'PHP HTTP \' + res.status + \' / Core HTTP \' + (json && json.http_code ? json.http_code : \'unknown\'));\n    MMT_print(json);\n\n    if(json && Number(json.http_code) === 401){\n      MMT_setStatus(\'PHP 有回應，但 Core 回 401：請檢查 PHP 是否有帶 X-API-Key。\');\n    }\n  }catch(err){\n    MMT_setStatus(\'Request failed: \' + err.message);\n    MMT_print({ ok:false, error:err.message });\n  }finally{\n    MMT_setLoading(btn, false);\n  }\n}\nfunction MMT_lookup(btn){\n  var uuid = MMT_get(\'mmt_uuid\').value.trim();\n  MMT_call(\'GET\', \'/api/v1/lookup?uuid=\' + encodeURIComponent(uuid), null, btn);\n}\nfunction MMT_clear(){\n  MMT_setStatus(\'Ready. 請按上方按鈕測試。\');\n  MMT_get(\'mmt_result\').textContent = \'No response yet.\';\n}\n</script>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:14:46','2026-05-02 13:14:46','',1416,'https://wp.momentry.ddns.net/?p=1428',0,'revision','',0),
(1429,1,'2026-05-02 13:16:21','2026-05-02 13:16:21','<!-- wp:html -->\n<div style=\"max-width:800px;margin:0 auto;padding:20px;border:1px solid #ddd;border-radius:16px;font-family:sans-serif\">\n\n<h2>Momentry API Test Panel</h2>\n\n<input id=\"proxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" style=\"width:100%;margin-bottom:10px\">\n\n<input id=\"uuid\" value=\"384b0ff44aaaa1f1\" style=\"width:100%;margin-bottom:10px\">\n\n<input id=\"query\" value=\"sun\" style=\"width:100%;margin-bottom:15px\">\n\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px\">\n<button onclick=\"call(\'/health\')\">health</button>\n<button onclick=\"call(\'/api/v1/videos\')\">videos</button>\n<button onclick=\"call(\'/api/v1/files/scan\')\">scan</button>\n<button onclick=\"lookup()\">lookup</button>\n<button onclick=\"progress()\">progress</button>\n<button onclick=\"search()\">search</button>\n<button onclick=\"process()\">process</button>\n<button onclick=\"full()\">🔥 full test</button>\n<button onclick=\"clearLog()\">clear</button>\n</div>\n\n<pre id=\"log\" style=\"background:#111;color:#0f0;padding:10px;height:400px;overflow:auto\"></pre>\n\n</div>\n\n<script>\nfunction log(t){\n  document.getElementById(\'log\').textContent =\n    \'[\'+new Date().toLocaleTimeString()+\'] \'+t+\'\\n\\n\'+\n    document.getElementById(\'log\').textContent\n}\n\nfunction proxy(){ return document.getElementById(\'proxy\').value }\nfunction uuid(){ return document.getElementById(\'uuid\').value }\nfunction query(){ return document.getElementById(\'query\').value }\n\nasync function call(path, body=null){\n  try{\n    let res = await fetch(proxy(),{\n      method:\'POST\',\n      headers:{\'Content-Type\':\'application/json\'},\n      body:JSON.stringify({\n        method: body ? \'POST\':\'GET\',\n        path:path,\n        body:body\n      })\n    })\n    let text = await res.text()\n    let json\n    try{ json = JSON.parse(text) }catch(e){ json = text }\n\n    log(path + \'\\nHTTP:\' + res.status + \'\\n\' + JSON.stringify(json,null,2))\n\n    if(json && json.http_code==401){\n      log(\'⚠ API KEY missing (PHP 沒帶)\')\n    }\n\n  }catch(e){\n    log(\'ERROR: \'+e.message)\n  }\n}\n\nfunction lookup(){\n  call(\'/api/v1/lookup?uuid=\'+uuid())\n}\n\nfunction progress(){\n  call(\'/api/v1/progress/\'+uuid())\n}\n\nfunction search(){\n  call(\'/api/v1/search\',{\n    query:query(),\n    limit:5\n  })\n}\n\nfunction process(){\n  call(\'/api/v1/assets/\'+uuid()+\'/process\',{})\n}\n\nasync function full(){\n  await call(\'/health\')\n  await call(\'/api/v1/videos\')\n  await call(\'/api/v1/files/scan\')\n  await lookup()\n  await search()\n}\n\nfunction clearLog(){\n  document.getElementById(\'log\').textContent=\'\'\n}\n</script>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:16:21','2026-05-02 13:16:21','',1416,'https://wp.momentry.ddns.net/?p=1429',0,'revision','',0),
(1431,1,'2026-05-02 13:17:40','2026-05-02 13:17:40','<!-- wp:html -->\n<div style=\"max-width:800px;margin:0 auto;padding:20px;border:1px solid #ddd;border-radius:16px;font-family:sans-serif\">\n\n<h2>Momentry API Test Panel</h2>\n\n<input id=\"proxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" style=\"width:100%;margin-bottom:10px\">\n\n<input id=\"uuid\" value=\"384b0ff44aaaa1f1\" style=\"width:100%;margin-bottom:10px\">\n\n<input id=\"query\" value=\"Charles\" style=\"width:100%;margin-bottom:15px\">\n\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px\">\n<button onclick=\"call(\'/health\')\">health</button>\n<button onclick=\"call(\'/api/v1/videos\')\">videos</button>\n<button onclick=\"call(\'/api/v1/files/scan\')\">scan</button>\n<button onclick=\"lookup()\">lookup</button>\n<button onclick=\"progress()\">progress</button>\n<button onclick=\"search()\">search</button>\n<button onclick=\"process()\">process</button>\n<button onclick=\"full()\">🔥 full test</button>\n<button onclick=\"clearLog()\">clear</button>\n</div>\n\n<pre id=\"log\" style=\"background:#111;color:#0f0;padding:10px;height:400px;overflow:auto\"></pre>\n\n</div>\n\n<script>\nfunction log(t){\n  document.getElementById(\'log\').textContent =\n    \'[\'+new Date().toLocaleTimeString()+\'] \'+t+\'\\n\\n\'+\n    document.getElementById(\'log\').textContent\n}\n\nfunction proxy(){ return document.getElementById(\'proxy\').value }\nfunction uuid(){ return document.getElementById(\'uuid\').value }\nfunction query(){ return document.getElementById(\'query\').value }\n\nasync function call(path, body=null){\n  try{\n    let res = await fetch(proxy(),{\n      method:\'POST\',\n      headers:{\'Content-Type\':\'application/json\'},\n      body:JSON.stringify({\n        method: body ? \'POST\':\'GET\',\n        path:path,\n        body:body\n      })\n    })\n    let text = await res.text()\n    let json\n    try{ json = JSON.parse(text) }catch(e){ json = text }\n\n    log(path + \'\\nHTTP:\' + res.status + \'\\n\' + JSON.stringify(json,null,2))\n\n    if(json && json.http_code==401){\n      log(\'⚠ API KEY missing (PHP 沒帶)\')\n    }\n\n  }catch(e){\n    log(\'ERROR: \'+e.message)\n  }\n}\n\nfunction lookup(){\n  call(\'/api/v1/lookup?uuid=\'+uuid())\n}\n\nfunction progress(){\n  call(\'/api/v1/progress/\'+uuid())\n}\n\nfunction search(){\n  call(\'/api/v1/search\',{\n    query:query(),\n    limit:5\n  })\n}\n\nfunction process(){\n  call(\'/api/v1/assets/\'+uuid()+\'/process\',{})\n}\n\nasync function full(){\n  await call(\'/health\')\n  await call(\'/api/v1/videos\')\n  await call(\'/api/v1/files/scan\')\n  await lookup()\n  await search()\n}\n\nfunction clearLog(){\n  document.getElementById(\'log\').textContent=\'\'\n}\n</script>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:17:40','2026-05-02 13:17:40','',1416,'https://wp.momentry.ddns.net/?p=1431',0,'revision','',0),
(1432,1,'2026-05-02 13:20:28','2026-05-02 13:20:28','<!-- wp:html -->\n<div style=\"max-width:800px;margin:0 auto;padding:20px;border:1px solid #ddd;border-radius:16px;font-family:sans-serif\">\n\n<h2>Momentry API Test Panel</h2>\n\n<input id=\"proxy\" value=\"/wp-admin/admin-ajax.php?action=momentry_core_proxy\" style=\"width:100%;margin-bottom:10px\">\n\n<input id=\"uuid\" placeholder=\"請先用 /videos 取得 uuid\"\nstyle=\"width:100%;margin-bottom:10px\">\n\n<input id=\"query\" value=\"Charles\" style=\"width:100%;margin-bottom:15px\">\n\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px\">\n<button onclick=\"call(\'/health\')\">health</button>\n<button onclick=\"call(\'/api/v1/videos\')\">videos</button>\n<button onclick=\"call(\'/api/v1/files/scan\')\">scan</button>\n<button onclick=\"lookup()\">lookup</button>\n<button onclick=\"progress()\">progress</button>\n<button onclick=\"search()\">search</button>\n<button onclick=\"process()\">process</button>\n<button onclick=\"full()\">🔥 full test</button>\n<button onclick=\"clearLog()\">clear</button>\n</div>\n\n<pre id=\"log\" style=\"background:#111;color:#0f0;padding:10px;height:400px;overflow:auto\"></pre>\n\n</div>\n\n<script>\nfunction log(t){\n  document.getElementById(\'log\').textContent =\n    \'[\'+new Date().toLocaleTimeString()+\'] \'+t+\'\\n\\n\'+\n    document.getElementById(\'log\').textContent\n}\n\nfunction proxy(){ return document.getElementById(\'proxy\').value }\nfunction uuid(){ return document.getElementById(\'uuid\').value }\nfunction query(){ return document.getElementById(\'query\').value }\n\nasync function call(path, body=null){\n  try{\n    let res = await fetch(proxy(),{\n      method:\'POST\',\n      headers:{\'Content-Type\':\'application/json\'},\n      body:JSON.stringify({\n        method: body ? \'POST\':\'GET\',\n        path:path,\n        body:body\n      })\n    })\n    let text = await res.text()\n    let json\n    try{ json = JSON.parse(text) }catch(e){ json = text }\n\n    log(path + \'\\nHTTP:\' + res.status + \'\\n\' + JSON.stringify(json,null,2))\n\n    if(json && json.http_code==401){\n      log(\'⚠ API KEY missing (PHP 沒帶)\')\n    }\n\n  }catch(e){\n    log(\'ERROR: \'+e.message)\n  }\n}\n\nfunction lookup(){\n  call(\'/api/v1/lookup?uuid=\'+uuid())\n}\n\nfunction progress(){\n  call(\'/api/v1/progress/\'+uuid())\n}\n\nfunction search(){\n  call(\'/api/v1/search\',{\n    query:query(),\n    limit:5\n  })\n}\n\nfunction process(){\n  call(\'/api/v1/assets/\'+uuid()+\'/process\',{})\n}\n\nasync function full(){\n  await call(\'/health\')\n  await call(\'/api/v1/videos\')\n  await call(\'/api/v1/files/scan\')\n  await lookup()\n  await search()\n}\n\nfunction clearLog(){\n  document.getElementById(\'log\').textContent=\'\'\n}\n</script>\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:20:28','2026-05-02 13:20:28','',1416,'https://wp.momentry.ddns.net/?p=1432',0,'revision','',0),
(1433,1,'2026-05-02 13:29:00','2026-05-02 13:29:00','<!-- wp:html -->\n<!--\nMomentry Mini REST API Test HTML\n用途：小型測試頁，用來確認 WordPress REST route 是否能轉接 AI Core。\n\n架構：HTML → WordPress REST API → PHP → AI Core\n不使用 n8n。\n不使用 admin-ajax。\n不要把 API Key 放在 HTML。\n\n請搭配 PHP routes：/wp-json/momentry/v1/*\n-->\n\n<div id=\"momentry-mini-rest-test\" style=\"max-width:820px;margin:0 auto;padding:22px;border:1px solid #e5eaf2;border-radius:18px;background:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,\'Segoe UI\',\'Noto Sans TC\',\'Microsoft JhengHei\',Arial,sans-serif;color:#172033;\">\n  <h2 style=\"margin:0 0 8px;font-size:22px;letter-spacing:-.03em;\">Momentry Mini REST API Test</h2>\n  <p style=\"margin:0 0 18px;color:#667085;line-height:1.6;font-size:14px;\">\n    用來確認 WordPress REST routes 是否正常轉接 AI Core。HTML 不放 API Key，API Key 由 PHP 加上。\n  </p>\n\n  <div style=\"margin-bottom:14px;\">\n    <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">REST Base URL</label>\n    <input id=\"mrt_base\" value=\"/wp-json/momentry/v1\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n  </div>\n\n  <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;\">\n    <div>\n      <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">UUID</label>\n      <input id=\"mrt_uuid\" placeholder=\"先按 videos 取得 uuid\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n    </div>\n    <div>\n      <label style=\"display:block;font-size:13px;font-weight:700;margin-bottom:6px;\">Search Query</label>\n      <input id=\"mrt_query\" value=\"sun\" style=\"width:100%;padding:11px 12px;border:1px solid #d8dfeb;border-radius:12px;font-size:14px;\">\n    </div>\n  </div>\n\n  <div style=\"display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;\">\n    <button onclick=\"MRT_call(\'GET\',\'/health\',null,this)\" style=\"padding:10px 14px;border:0;border-radius:12px;background:#2563eb;color:white;font-weight:700;cursor:pointer;\">health</button>\n    <button onclick=\"MRT_videos(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">videos</button>\n    <button onclick=\"MRT_call(\'GET\',\'/scan\',null,this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">scan</button>\n    <button onclick=\"MRT_lookup(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">lookup</button>\n    <button onclick=\"MRT_process(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">process</button>\n    <button onclick=\"MRT_progress(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">progress</button>\n    <button onclick=\"MRT_search(this)\" style=\"padding:10px 14px;border:1px solid #d8dfeb;border-radius:12px;background:white;color:#172033;font-weight:700;cursor:pointer;\">search</button>\n    <button onclick=\"MRT_clear()\" style=\"padding:10px 14px;border:1px solid #fecaca;border-radius:12px;background:white;color:#b91c1c;font-weight:700;cursor:pointer;\">clear</button>\n  </div>\n\n  <div id=\"mrt_status\" style=\"margin-bottom:10px;padding:10px 12px;border-radius:12px;background:white;border:1px solid #e5eaf2;font-size:13px;color:#667085;\">\n    Ready. 請先按 health，再按 videos。\n  </div>\n\n  <pre id=\"mrt_result\" style=\"margin:0;padding:14px;border-radius:14px;background:#0f172a;color:#dbeafe;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto;\">No response yet.</pre>\n</div>\n\n<script>\nfunction MRT_get(id){ return document.getElementById(id); }\nfunction MRT_base(){ return MRT_get(\'mrt_base\').value.replace(/\\/$/, \'\'); }\nfunction MRT_uuid(){ return MRT_get(\'mrt_uuid\').value.trim(); }\nfunction MRT_query(){ return MRT_get(\'mrt_query\').value.trim() || \'sun\'; }\nfunction MRT_status(text){ MRT_get(\'mrt_status\').textContent = text; }\nfunction MRT_print(obj){\n  try { MRT_get(\'mrt_result\').textContent = JSON.stringify(obj, null, 2); }\n  catch(e){ MRT_get(\'mrt_result\').textContent = String(obj); }\n}\nfunction MRT_loading(btn, loading){\n  if(!btn) return;\n  if(loading){ btn.dataset.oldText = btn.textContent; btn.textContent = \'Testing...\'; btn.disabled = true; }\n  else { btn.textContent = btn.dataset.oldText || btn.textContent; btn.disabled = false; }\n}\nasync function MRT_call(method, path, body, btn){\n  MRT_loading(btn, true);\n  MRT_status(\'Calling \' + method + \' \' + path);\n  try{\n    var options = { method: method, headers: { \'Content-Type\': \'application/json\' } };\n    if(body !== null && body !== undefined){ options.body = JSON.stringify(body); }\n\n    var res = await fetch(MRT_base() + path, options);\n    var text = await res.text();\n    var json;\n    try { json = text ? JSON.parse(text) : null; }\n    catch(e){ json = { raw_response: text }; }\n\n    MRT_status(\'WordPress HTTP \' + res.status + \' / Core HTTP \' + (json && json.http_code ? json.http_code : \'unknown\'));\n    MRT_print(json);\n\n    if(json && Number(json.http_code) === 401){\n      MRT_status(\'Core 回 401：請檢查 PHP 是否有帶 X-API-Key。\');\n    }\n\n    return json;\n  }catch(err){\n    MRT_status(\'Request failed: \' + err.message);\n    MRT_print({ ok:false, error:err.message });\n    return null;\n  }finally{\n    MRT_loading(btn, false);\n  }\n}\nasync function MRT_videos(btn){\n  var json = await MRT_call(\'GET\',\'/videos\',null,btn);\n  if(json && json.data && Array.isArray(json.data.videos) && json.data.videos.length){\n    var first = json.data.videos[0];\n    var uuid = first.uuid || first.video_uuid || first.video_id || \'\';\n    if(uuid){\n      MRT_get(\'mrt_uuid\').value = uuid;\n      MRT_status(\'videos OK，已自動填入第一個 uuid：\' + uuid);\n    }\n  }\n}\nfunction MRT_lookup(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'GET\',\'/lookup/\' + encodeURIComponent(MRT_uuid()),null,btn);\n}\nfunction MRT_process(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'POST\',\'/process/\' + encodeURIComponent(MRT_uuid()),{},btn);\n}\nfunction MRT_progress(btn){\n  if(!MRT_uuid()) return MRT_status(\'請先填 UUID，或先按 videos 自動取得。\');\n  return MRT_call(\'GET\',\'/progress/\' + encodeURIComponent(MRT_uuid()),null,btn);\n}\nfunction MRT_search(btn){\n  return MRT_call(\'POST\',\'/search\',{ query:MRT_query(), limit:5 },btn);\n}\nfunction MRT_clear(){\n  MRT_status(\'Ready. 請先按 health，再按 videos。\');\n  MRT_get(\'mrt_result\').textContent = \'No response yet.\';\n}\n</script>\n\n<!-- /wp:html -->','Scan - test -SC','','inherit','closed','closed','','1416-revision-v1','','','2026-05-02 13:29:00','2026-05-02 13:29:00','',1416,'https://wp.momentry.ddns.net/?p=1433',0,'revision','',0),
(1434,1,'2026-05-05 09:46:54','2026-05-05 09:46:54','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n try {\n  const url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\n  const res = await fetch(url, {\n    method: \"GET\",\n    cache: \"no-store\",\n    headers: {\n      \"Accept\": \"application/json\",\n      \"ngrok-skip-browser-warning\": \"true\"\n    }\n  });\n\n  const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore-Test-SC','','publish','closed','closed','','explore','','','2026-05-18 00:50:16','2026-05-18 00:50:16','',0,'https://wp.momentry.ddns.net/?page_id=1434',0,'page','',0),
(1435,1,'2026-05-05 09:46:32','2026-05-05 09:46:32','','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 09:46:32','2026-05-05 09:46:32','',1434,'https://wp.momentry.ddns.net/?p=1435',0,'revision','',0),
(1436,1,'2026-05-05 09:46:54','2026-05-05 09:46:54','<!-- wp:html /-->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 09:46:54','2026-05-05 09:46:54','',1434,'https://wp.momentry.ddns.net/?p=1436',0,'revision','',0),
(1437,1,'2026-05-05 10:00:35','2026-05-05 10:00:35','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <div class=\"explore-header\">\n    <div>\n      <h1>Explore</h1>\n      <p>Browse selected local directories and media files.</p>\n    </div>\n\n    <div class=\"explore-actions\">\n      <select id=\"directorySelect\" multiple>\n        <option value=\"demo\" selected>Demo Library</option>\n        <option value=\"project\">Project Footage</option>\n        <option value=\"family\">Family Archive</option>\n        <option value=\"export\">Export Folder</option>\n      </select>\n\n      <button onclick=\"loadFiles()\">Load</button>\n    </div>\n  </div>\n\n  <div class=\"explore-toolbar\">\n    <input id=\"searchInput\" type=\"text\" placeholder=\"Search files...\" oninput=\"renderFiles()\" />\n\n    <select id=\"typeFilter\" onchange=\"renderFiles()\">\n      <option value=\"all\">All</option>\n      <option value=\"video\">Videos</option>\n      <option value=\"image\">Images</option>\n      <option value=\"folder\">Folders</option>\n      <option value=\"document\">Documents</option>\n    </select>\n  </div>\n\n  <div id=\"statusText\" class=\"status-text\">Select directories and click Load.</div>\n\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    background: #f6f7fb;\n    min-height: 100vh;\n    padding: 28px;\n    color: #1f2937;\n  }\n\n  .explore-header {\n    display: flex;\n    justify-content: space-between;\n    gap: 20px;\n    align-items: flex-start;\n    margin-bottom: 22px;\n  }\n\n  .explore-header h1 {\n    margin: 0;\n    font-size: 32px;\n    font-weight: 750;\n  }\n\n  .explore-header p {\n    margin: 6px 0 0;\n    color: #6b7280;\n    font-size: 14px;\n  }\n\n  .explore-actions {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n  }\n\n  #directorySelect {\n    width: 220px;\n    height: 92px;\n    border: 1px solid #d1d5db;\n    border-radius: 14px;\n    padding: 8px;\n    background: #fff;\n  }\n\n  button {\n    border: 0;\n    border-radius: 14px;\n    padding: 12px 18px;\n    background: #111827;\n    color: white;\n    cursor: pointer;\n    font-weight: 650;\n  }\n\n  button:hover {\n    opacity: 0.88;\n  }\n\n  .explore-toolbar {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 16px;\n  }\n\n  .explore-toolbar input,\n  .explore-toolbar select {\n    border: 1px solid #d1d5db;\n    border-radius: 14px;\n    padding: 12px 14px;\n    background: #fff;\n    font-size: 14px;\n  }\n\n  .explore-toolbar input {\n    flex: 1;\n  }\n\n  .status-text {\n    margin: 12px 0 18px;\n    color: #6b7280;\n    font-size: 13px;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: #fff;\n    border: 1px solid #e5e7eb;\n    border-radius: 20px;\n    padding: 18px 14px;\n    min-height: 138px;\n    cursor: pointer;\n    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);\n    transition: 0.18s ease;\n  }\n\n  .file-card:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);\n  }\n\n  .file-icon {\n    font-size: 38px;\n    margin-bottom: 12px;\n  }\n\n  .file-name {\n    font-size: 14px;\n    font-weight: 650;\n    word-break: break-word;\n    line-height: 1.3;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    color: #6b7280;\n    font-size: 12px;\n  }\n\n  .empty-state {\n    grid-column: 1 / -1;\n    padding: 40px;\n    text-align: center;\n    background: #fff;\n    border-radius: 20px;\n    color: #6b7280;\n  }\n\n  @media (max-width: 720px) {\n    .explore-header {\n      flex-direction: column;\n    }\n\n    .explore-actions,\n    .explore-toolbar {\n      width: 100%;\n      flex-direction: column;\n    }\n\n    #directorySelect {\n      width: 100%;\n    }\n  }\n</style>\n\n<script>\n  let allFiles = [];\n\n  const mockFilesByDirectory = {\n    demo: [\n      { name: \"Charade_1963.mov\", type: \"video\", size: \"2.3 GB\", modified: \"2026/05/01\" },\n      { name: \"interview_clip.mp4\", type: \"video\", size: \"830 MB\", modified: \"2026/04/28\" },\n      { name: \"scene_thumbnail.jpg\", type: \"image\", size: \"1.8 MB\", modified: \"2026/04/20\" }\n    ],\n    project: [\n      { name: \"Computex_Demo\", type: \"folder\", size: \"Folder\", modified: \"2026/05/03\" },\n      { name: \"booth_walkthrough.mp4\", type: \"video\", size: \"1.1 GB\", modified: \"2026/05/02\" },\n      { name: \"script_notes.pdf\", type: \"document\", size: \"340 KB\", modified: \"2026/04/30\" }\n    ],\n    family: [\n      { name: \"birthday_photo.png\", type: \"image\", size: \"4.2 MB\", modified: \"2026/03/12\" },\n      { name: \"family_trip.mov\", type: \"video\", size: \"900 MB\", modified: \"2026/03/10\" }\n    ],\n    export: [\n      { name: \"final_export.mp4\", type: \"video\", size: \"1.7 GB\", modified: \"2026/05/04\" },\n      { name: \"preview_stills\", type: \"folder\", size: \"Folder\", modified: \"2026/05/04\" }\n    ]\n  };\n\n  function getSelectedDirectories() {\n    return Array.from(document.getElementById(\"directorySelect\").selectedOptions)\n      .map(option => option.value);\n  }\n\n  function getIcon(type) {\n    if (type === \"video\") return \"🎬\";\n    if (type === \"image\") return \"🖼️\";\n    if (type === \"folder\") return \"📁\";\n    if (type === \"document\") return \"📄\";\n    return \"📦\";\n  }\n\n  function loadFiles() {\n    const selectedDirs = getSelectedDirectories();\n\n    allFiles = selectedDirs.flatMap(dir => {\n      return (mockFilesByDirectory[dir] || []).map(file => ({\n        ...file,\n        directory: dir\n      }));\n    });\n\n    document.getElementById(\"statusText\").innerText =\n      `Loaded ${allFiles.length} files from ${selectedDirs.length} directories.`;\n\n    renderFiles();\n  }\n\n  function renderFiles() {\n    const grid = document.getElementById(\"fileGrid\");\n    const keyword = document.getElementById(\"searchInput\").value.toLowerCase().trim();\n    const typeFilter = document.getElementById(\"typeFilter\").value;\n\n    const filtered = allFiles.filter(file => {\n      const matchKeyword = file.name.toLowerCase().includes(keyword);\n      const matchType = typeFilter === \"all\" || file.type === typeFilter;\n      return matchKeyword && matchType;\n    });\n\n    if (filtered.length === 0) {\n      grid.innerHTML = `<div class=\"empty-state\">No files found.</div>`;\n      return;\n    }\n\n    grid.innerHTML = filtered.map(file => `\n      <div class=\"file-card\" onclick=\"openFile(\'${file.name}\', \'${file.type}\')\">\n        <div class=\"file-icon\">${getIcon(file.type)}</div>\n        <div class=\"file-name\">${file.name}</div>\n        <div class=\"file-meta\">${file.directory} · ${file.size}</div>\n        <div class=\"file-meta\">${file.modified}</div>\n      </div>\n    `).join(\"\");\n  }\n\n  function openFile(name, type) {\n    alert(`Open ${type}: ${name}`);\n  }\n\n  loadFiles();\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:00:35','2026-05-05 10:00:35','',1434,'https://wp.momentry.ddns.net/?p=1437',0,'revision','',0),
(1439,1,'2026-05-05 10:34:29','2026-05-05 10:34:29','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n    const res = await fetch(`/wp-json/momentry/v1/explore/files?dir=${dir}`);\n    const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:34:29','2026-05-05 10:34:29','',1434,'https://wp.momentry.ddns.net/?p=1439',0,'revision','',0),
(1440,1,'2026-05-05 10:46:17','2026-05-05 10:46:17','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n    const res = await fetch(\"https://january-cardstock-component.ngrok-free.dev/files?dir=downloads\");\n    const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:46:17','2026-05-05 10:46:17','',1434,'https://wp.momentry.ddns.net/?p=1440',0,'revision','',0),
(1441,1,'2026-05-05 10:47:00','2026-05-05 10:47:00','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n    const res = await fetch(`/wp-json/momentry/v1/explore/files?dir=${dir}`);\n    const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:47:00','2026-05-05 10:47:00','',1434,'https://wp.momentry.ddns.net/?p=1441',0,'revision','',0),
(1442,1,'2026-05-05 10:48:16','2026-05-05 10:48:16','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\ntry {\n  const res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\n  const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:48:16','2026-05-05 10:48:16','',1434,'https://wp.momentry.ddns.net/?p=1442',0,'revision','',0),
(1443,1,'2026-05-05 10:53:36','2026-05-05 10:53:36','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\ntry {\nconst res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`, {\n  method: \"GET\",\n  headers: {\n    \"ngrok-skip-browser-warning\": \"true\"\n  }\n});\n\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:53:36','2026-05-05 10:53:36','',1434,'https://wp.momentry.ddns.net/?p=1443',0,'revision','',0),
(1444,1,'2026-05-05 10:56:26','2026-05-05 10:56:26','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n    <button onclick=\"loadFiles()\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\ntry {\nconst res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\nconst data = await res.json();\n});\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 10:56:26','2026-05-05 10:56:26','',1434,'https://wp.momentry.ddns.net/?p=1444',0,'revision','',0),
(1446,1,'2026-05-05 11:01:38','2026-05-05 11:01:38','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\ntry {\nconst res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\nconst data = await res.json();\n});\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  document.getElementById(\"loadFilesBtn\").addEventListener(\"click\", loadFiles);\n});\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n    const res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\n    const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:01:38','2026-05-05 11:01:38','',1434,'https://wp.momentry.ddns.net/?p=1446',0,'revision','',0),
(1447,1,'2026-05-05 11:04:27','2026-05-05 11:04:27','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  document.getElementById(\"loadFilesBtn\").addEventListener(\"click\", loadFiles);\n});\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n    const res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\n    const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:04:27','2026-05-05 11:04:27','',1434,'https://wp.momentry.ddns.net/?p=1447',0,'revision','',0),
(1448,1,'2026-05-05 11:07:12','2026-05-05 11:07:12','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  document.getElementById(\"loadFilesBtn\").addEventListener(\"click\", loadFiles);\n});\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\n const res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}`);\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:07:12','2026-05-05 11:07:12','',1434,'https://wp.momentry.ddns.net/?p=1448',0,'revision','',0),
(1449,1,'2026-05-05 11:16:17','2026-05-05 11:16:17','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  document.getElementById(\"loadFilesBtn\").addEventListener(\"click\", loadFiles);\n});\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\nconst res = await fetch(`https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`);\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:16:17','2026-05-05 11:16:17','',1434,'https://wp.momentry.ddns.net/?p=1449',0,'revision','',0),
(1450,1,'2026-05-05 11:19:01','2026-05-05 11:19:01','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  document.getElementById(\"loadFilesBtn\").addEventListener(\"click\", loadFiles);\n});\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\nconst url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\nconst res = await fetch(url, {\n  method: \"GET\",\n  cache: \"no-store\"\n});\n\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:19:01','2026-05-05 11:19:01','',1434,'https://wp.momentry.ddns.net/?p=1450',0,'revision','',0),
(1451,1,'2026-05-05 11:22:11','2026-05-05 11:22:11','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\nconst url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\nconst res = await fetch(url, {\n  method: \"GET\",\n  cache: \"no-store\"\n});\n\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:22:11','2026-05-05 11:22:11','',1434,'https://wp.momentry.ddns.net/?p=1451',0,'revision','',0),
(1452,1,'2026-05-05 11:29:39','2026-05-05 11:29:39','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n  try {\nconst url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\nconst res = await fetch(url, {\n  method: \"GET\",\n  cache: \"no-store\"\n});\nheaders: {\n  \"Accept\": \"application/json\",\n  \"ngrok-skip-browser-warning\": \"true\"\n}\n\nconst data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:29:39','2026-05-05 11:29:39','',1434,'https://wp.momentry.ddns.net/?p=1452',0,'revision','',0),
(1453,1,'2026-05-05 11:31:53','2026-05-05 11:31:53','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n try {\n  const url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\n  const res = await fetch(url, {\n    method: \"GET\",\n    cache: \"no-store\",\n    headers: {\n      \"Accept\": \"application/json\",\n      \"ngrok-skip-browser-warning\": \"true\"\n    }\n  });\n\n  const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:31:53','2026-05-05 11:31:53','',1434,'https://wp.momentry.ddns.net/?p=1453',0,'revision','',0),
(1454,1,'2026-05-05 11:37:51','2026-05-05 11:37:51','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n try {\n  const url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\n  const res = await fetch(url, {\n    method: \"GET\",\n    cache: \"no-store\",\n    headers: {\n      \"Accept\": \"application/json\",\n      \"ngrok-skip-browser-warning\": \"true\"\n    }\n  });\n\n  const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore-SC','','inherit','closed','closed','','1434-revision-v1','','','2026-05-05 11:37:51','2026-05-05 11:37:51','',1434,'https://wp.momentry.ddns.net/?p=1454',0,'revision','',0),
(1455,1,'2026-05-07 02:45:58','2026-05-07 02:45:58','<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:shortcode -->\n[ms_login_form_v2]\n<!-- /wp:shortcode -->','Log In','','inherit','closed','closed','','44-revision-v1','','','2026-05-07 02:45:58','2026-05-07 02:45:58','',44,'https://wp.momentry.ddns.net/?p=1455',0,'revision','',0),
(1456,1,'2026-05-07 03:01:55','2026-05-07 03:01:55','<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:shortcode -->\n[ms_login_form]\n<!-- /wp:shortcode -->','Log In','','inherit','closed','closed','','44-revision-v1','','','2026-05-07 03:01:55','2026-05-07 03:01:55','',44,'https://wp.momentry.ddns.net/?p=1456',0,'revision','',0),
(1457,1,'2026-05-07 04:33:42','2026-05-07 04:33:42','<!-- wp:shortcode -->\n[ms_lost_password_form]\n<!-- /wp:shortcode -->','Forgot Password','','publish','closed','closed','','forgot-password','','','2026-05-18 00:49:57','2026-05-18 00:49:57','',0,'https://wp.momentry.ddns.net/?page_id=1457',0,'page','',0),
(1458,1,'2026-05-07 04:33:24','2026-05-07 04:33:24','','Forgot Password','','inherit','closed','closed','','1457-revision-v1','','','2026-05-07 04:33:24','2026-05-07 04:33:24','',1457,'https://wp.momentry.ddns.net/?p=1458',0,'revision','',0),
(1459,1,'2026-05-07 04:34:03','2026-05-07 04:34:03','<!-- wp:shortcode -->\n[ms_lost_password_form]\n<!-- /wp:shortcode -->','Forgot Password','','inherit','closed','closed','','1457-revision-v1','','','2026-05-07 04:34:03','2026-05-07 04:34:03','',1457,'https://wp.momentry.ddns.net/?p=1459',0,'revision','',0),
(1461,4,'2026-05-07 07:10:55','2026-05-07 07:10:55','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'<a class=\"cviewbtn\"\'+(c.pageUrl ? \' href=\"\'+e(c.pageUrl)+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>完整瀏覽</a>\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-07 07:10:55','2026-05-07 07:10:55','',523,'https://wp.momentry.ddns.net/?p=1461',0,'revision','',0),
(1462,4,'2026-05-07 07:17:23','2026-05-07 07:17:23','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-07 07:17:23','2026-05-07 07:17:23','',523,'https://wp.momentry.ddns.net/?p=1462',0,'revision','',0),
(1463,1,'2026-05-08 02:45:44','2026-05-08 02:45:44','<!-- wp:shortcode -->\n[ms_lost_password_form]\n<!-- /wp:shortcode -->','Forgot Password-SC','','inherit','closed','closed','','1457-revision-v1','','','2026-05-08 02:45:44','2026-05-08 02:45:44','',1457,'https://wp.momentry.ddns.net/?p=1463',0,'revision','',0),
(1464,1,'2026-05-08 02:46:01','2026-05-08 02:46:01','<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:shortcode -->\n[ms_login_form]\n<!-- /wp:shortcode -->','Log In -SC','','inherit','closed','closed','','44-revision-v1','','','2026-05-08 02:46:01','2026-05-08 02:46:01','',44,'https://wp.momentry.ddns.net/?p=1464',0,'revision','',0),
(1465,1,'2026-05-08 02:47:05','2026-05-08 02:47:05','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Evaluation 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Evaluation </h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Evaluation -SC','','inherit','closed','closed','','1035-revision-v1','','','2026-05-08 02:47:05','2026-05-08 02:47:05','',1035,'https://wp.momentry.ddns.net/?p=1465',0,'revision','',0),
(1466,1,'2026-05-08 02:47:19','2026-05-08 02:47:19','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 02:47:19','2026-05-08 02:47:19','',1356,'https://wp.momentry.ddns.net/?p=1466',0,'revision','',0),
(1467,1,'2026-05-08 02:47:25','2026-05-08 02:47:25','<!-- wp:html -->\n<!-- =========================================================\n  lt-people-people — 人物管理\n  WordPress 頁面 slug: lt-people-people\n  負責人 B 維護此頁面\n  ========================================================= -->\n\n<!-- View A：候選確認 + 尚未加入人物（預設顯示）-->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplPendingBtn\">待確認人物</button>\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-ppl-progress-wrap\">\n      <span class=\"ms-ppl-progress-text\">識別中… 目前進度</span>\n      <span class=\"ms-ppl-progress-pct\" id=\"msPplProgress\">80%</span>\n    </div>\n    <div style=\"flex:1;\"></div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 依時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\"> 依檔名</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 是同一人嗎？（待確認區，預設隱藏，按待確認人物顯示）-->\n  <div id=\"msPplCandidateArea\"></div>\n\n  <!-- 尚未加入的人物 -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnassignedTitle\">尚未加入的人物</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- View B：人物詳情 -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n    <!-- 編輯按鈕：圓形鉛筆 -->\n    <button class=\"ms-ppl-edit-fab\" id=\"msPplEditToggle\" title=\"編輯\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\">—</div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Context Menu：不是此人物 / 另建人物 -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Modal: 合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplMergeConfirm\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ── Root ── */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n}\n\n/* ── Shared buttons ── */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* Sort panel — anchored right, above toolbar row overflow */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ── Progress ── */\n.ms-ppl-progress-wrap {\n  display: flex; align-items: center; gap: 7px;\n}\n.ms-ppl-spinner { width: 16px; height: 16px; flex-shrink: 0; color: #9aa0a6; }\n.ms-ppl-progress-text {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368;\n}\n.ms-ppl-progress-pct {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; color: #1967d2;\n}\n\n/* ── People views ── */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Candidate pairs */\n.ms-ppl-candidates-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 700; color: #202124;\n  margin-bottom: 12px;\n}\n.ms-ppl-pair {\n  display: flex; align-items: center; gap: 14px;\n  padding: 12px 16px; border-radius: 14px;\n  background: #f8f9fa; margin-bottom: 10px;\n  border: 1px solid #eee;\n}\n.ms-ppl-pair-face {\n  width: 64px; height: 64px; border-radius: 12px;\n  flex-shrink: 0; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-pair-face img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-pair-actions { display: flex; gap: 8px; margin-left: auto; }\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 700; letter-spacing: .04em;\n  text-transform: uppercase; color: #9aa0a6;\n  margin: 28px 0 16px;\n}\n\n/* Unassigned grid */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 150px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 150px; height: 150px; border-radius: 16px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg {\n  width: 100%; height: 100%;\n}\n.ms-ppl-face-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 150px;\n}\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em;\n}\n\n/* Detail header */\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 32px; position: relative;\n}\n.ms-ppl-detail-avatar {\n  width: 100px; height: 100px; border-radius: 18px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 20px; font-weight: 700; color: #202124;\n  margin-bottom: 10px;\n}\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px;\n  margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* 編輯 FAB 圓形按鈕 */\n.ms-ppl-edit-fab {\n  position: absolute; top: 0; right: 20px;\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  transition: background .15s, border-color .15s, color .15s;\n  flex-shrink: 0;\n}\n.ms-ppl-edit-fab:hover {\n  background: #202124; border-color: #202124; color: #fff;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 12px; color: #5f6368;\n  cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* Face strip */\n.ms-ppl-strip-wrap {\n  position: relative; margin-bottom: 28px;\n  padding-right: 52px;\n}\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 6px;\n  scrollbar-width: thin;\n}\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 64px; height: 64px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n  display: flex; align-items: center; justify-content: center;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* Right-click context menu indicator on face strip */\n.ms-ppl-strip-ctx-hint {\n  position: absolute; bottom: -4px; right: -4px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  display: none; place-items: center;\n  font-size: 9px; color: #5f6368; line-height: 1;\n  cursor: pointer;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-ctx-hint { display: grid; }\n\n/* Strip arrow — now inside the wrapper */\n.ms-ppl-strip-arrow {\n  position: absolute; right: 20px; top: 17px;\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none;\n  line-height: 1;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* Context menu */\n.ms-ctx-menu {\n  display: none;\n  position: fixed;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px;\n  z-index: 9999;\n  min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%;\n  text-align: left; padding: 9px 14px;\n  border: none; background: transparent;\n  border-radius: 8px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* Media grid */\n.ms-ppl-media-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 18px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9;\n  position: relative; overflow: hidden;\n  background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-family: \'DM Sans\', sans-serif;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n  margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Modals */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18);\n  text-align: center;\n}\n.ms-modal-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 16px; font-weight: 700; color: #202124;\n  margin-bottom: 8px;\n}\n.ms-modal-sub {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #5f6368; margin-bottom: 22px;\n}\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* divider */\n.ms-ppl-divider {\n  border: none; border-top: 1px solid #eee;\n  margin: 6px 0 18px;\n}\n</style>\n\n<script>\n(function () {\n  \'use strict\';\n\n  /* ── Silhouette SVG (generic person placeholder) ── */\n  var SILHOUETTE_SVG = \'<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* Audrey Hepburn real image */\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ── 共用人物資料（與檔案管理頁互通）── */\n  var SHARED_PEOPLE = [\n    {\n      id: \'p001\', type: \'photo\',\n      name: \'林夏 Luna Lin\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女主角\', \'記憶修復師\'],\n      movie: \'Memory City\', role: \'女主角\',\n      description: \'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\'\n    },\n    {\n      id: \'p002\', type: \'video\',\n      name: \'陳凱 Kai Chen\',\n      source: \'電影：Memory City\',\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400&auto=format&fit=crop\',\n      people: [\'男主角\', \'資料探員\'],\n      movie: \'Memory City\', role: \'男主角\',\n      description: \'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration: 25\n    },\n    {\n      id: \'p003\', type: \'photo\',\n      name: \'Mia Wong\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop\',\n      people: [\'配角\', \'記者\'],\n      movie: \'Blue Night\', role: \'配角\',\n      description: \'追查失蹤案件的記者，掌握關鍵線索。\'\n    },\n    {\n      id: \'p004\', type: \'video\',\n      name: \'Ryan Xu\',\n      source: \'電影：Blue Night\',\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400&auto=format&fit=crop\',\n      people: [\'反派\', \'企業繼承人\'],\n      movie: \'Blue Night\', role: \'反派\',\n      description: \'外表優雅，實際操控地下資料交易。\',\n      duration: 48\n    },\n    {\n      id: \'p005\', type: \'photo\',\n      name: \'安娜 Anna Lee\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400&auto=format&fit=crop\',\n      people: [\'女配角\', \'港口醫師\'],\n      movie: \'Silent Harbor\', role: \'女配角\',\n      description: \'在港口診所工作的醫師，知道主角過去的秘密。\'\n    },\n    {\n      id: \'p006\', type: \'video\',\n      name: \'David Park\',\n      source: \'電影：Silent Harbor\',\n      thumb: \'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=400&auto=format&fit=crop\',\n      people: [\'警探\', \'關鍵人物\'],\n      movie: \'Silent Harbor\', role: \'警探\',\n      description: \'負責調查港口命案，逐步接近真相。\',\n      duration: 36\n    }\n  ];\n\n  /* ── Mock 資料 ── */\n  var MOCK_CANDIDATES = [\n    { id: \'c1\', thumbA: SHARED_PEOPLE[0].thumb, thumbB: SHARED_PEOPLE[2].thumb },\n    { id: \'c2\', thumbA: SHARED_PEOPLE[1].thumb, thumbB: SHARED_PEOPLE[3].thumb },\n    { id: \'c3\', thumbA: SHARED_PEOPLE[4].thumb, thumbB: SHARED_PEOPLE[5].thumb },\n  ];\n\n  var MOCK_UNASSIGNED = SHARED_PEOPLE.map(function(p, i) {\n    return { id: p.id, name: p.name, isNew: i < 2, thumb: p.thumb };\n  });\n\n  var MOCK_IDENTITY = {\n    identity_id: \'id-audrey\',\n    name: \'奧黛麗赫本\',\n    aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n    description: {\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過羅馬假期，窈窕淑女\'\n    },\n    isAudrey: true,\n    face_members: [\n      { id: \'fm1\', isAudrey: true  },\n      { id: \'fm2\', isAudrey: true  },\n      { id: \'fm3\', isAudrey: false, is_wrong: true, thumb: SHARED_PEOPLE[2].thumb }\n    ],\n    media_total: SHARED_PEOPLE.length,\n    media: SHARED_PEOPLE.map(function(p) {\n      return {\n        id: p.id,\n        title: p.name,\n        subtitle: p.source,\n        thumb: p.thumb,\n        type: p.type,\n        duration: p.duration || null\n      };\n    })\n  };\n\n  var pendingMergeId    = null;\n  var pendingRemoveFmId = null;\n  var ctxFmId           = null;\n  var currentAliases    = [];\n  var editMode          = false;\n  var currentIdentity   = null;  /* 目前詳情頁顯示的 identity 物件 */\n\n  /* ── Helper: make avatar img element ── */\n  function makeAvatarEl(thumb, isAudrey, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = isAudrey ? AUDREY_IMG_URL : (thumb || null);\n    if (src) {\n      var img = document.createElement(\'img\');\n      img.src = src;\n      img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n      img.onerror = function() { wrap.innerHTML = SILHOUETTE_SVG; };\n      wrap.appendChild(img);\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  /* ── Views ── */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ── Candidates ── */\n  var candidatesVisible = false;\n\n  function renderCandidates() {\n    var area = document.getElementById(\'msPplCandidateArea\');\n    if (!area) return;\n\n    if (!candidatesVisible) {\n      area.innerHTML = \'\';\n      return;\n    }\n\n    if (!MOCK_CANDIDATES.length) {\n      area.innerHTML =\n        \'<div style=\"font-size:13px;color:#5f6368;padding:4px 0 8px;font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\">目前沒有需要確認的人物</div>\' +\n        \'<hr class=\"ms-ppl-divider\">\';\n      return;\n    }\n\n    var frag = document.createDocumentFragment();\n\n    var titleEl = document.createElement(\'div\');\n    titleEl.className = \'ms-ppl-candidates-title\';\n    titleEl.textContent = \'是同一人嗎？\';\n    frag.appendChild(titleEl);\n\n    MOCK_CANDIDATES.forEach(function (cand, idx) {\n      var row = document.createElement(\'div\');\n      row.className = \'ms-ppl-pair\';\n      row.dataset.candId = cand.id;\n\n      var faceA = makeAvatarEl(cand.thumbA, false, 64, \'12px\');\n      var faceB = makeAvatarEl(cand.thumbB, false, 64, \'12px\');\n\n      var actions = document.createElement(\'div\');\n      actions.className = \'ms-ppl-pair-actions\';\n      actions.innerHTML =\n        \'<button class=\"ms-fm-btn ppl-merge-btn\">合併</button>\' +\n        \'<button class=\"ms-fm-btn ppl-skip-btn\">略過</button>\';\n\n      row.appendChild(faceA);\n      row.appendChild(faceB);\n      row.appendChild(actions);\n      frag.appendChild(row);\n    });\n\n    var hr = document.createElement(\'hr\');\n    hr.className = \'ms-ppl-divider\';\n    frag.appendChild(hr);\n\n    area.innerHTML = \'\';\n    area.appendChild(frag);\n\n    area.querySelectorAll(\'.ppl-merge-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        pendingMergeId = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        showModal(\'msPplMergeModal\');\n      });\n    });\n    area.querySelectorAll(\'.ppl-skip-btn\').forEach(function (btn) {\n      btn.addEventListener(\'click\', function () {\n        var id = btn.closest(\'.ms-ppl-pair\').dataset.candId;\n        MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== id; });\n        renderCandidates();\n      });\n    });\n  }\n\n  /* 待確認人物按鈕 */\n  var pendingBtn = document.getElementById(\'msPplPendingBtn\');\n  if (pendingBtn) {\n    pendingBtn.addEventListener(\'click\', function () {\n      candidatesVisible = !candidatesVisible;\n      renderCandidates();\n    });\n  }\n\n  /* ── Unassigned ── */\n  function renderUnassigned() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var sorted = getSortedUnassigned();\n    sorted.forEach(function (u, idx) {\n      // 找到在原始 SHARED_PEOPLE 中的 index（用於取得完整資料）\n      var personIdx = SHARED_PEOPLE.findIndex(function(p){ return p.id === u.id; });\n      var person = SHARED_PEOPLE[personIdx] || SHARED_PEOPLE[idx] || SHARED_PEOPLE[0];\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\';\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      if (u.thumb) {\n        var img = document.createElement(\'img\');\n        img.src = u.thumb;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgWrap.innerHTML = SILHOUETTE_SVG; };\n        imgWrap.appendChild(img);\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = u.name || \'\';\n\n      if (u.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n      card.addEventListener(\'click\', (function(person) {\n        return function() {\n          openDetailWithData({\n            identity_id: person.id,\n            name: person.name,\n            aliases: person.people || [],\n            description: {\n              actor: person.name,\n              role: person.role,\n              notes: person.description\n            },\n            isAudrey: false,\n            thumb: person.thumb,\n            face_members: [\n              { id: person.id + \'-fm1\', isAudrey: false, thumb: person.thumb },\n              { id: person.id + \'-fm2\', isAudrey: false, thumb: SHARED_PEOPLE[(personIdx + 1) % SHARED_PEOPLE.length].thumb, is_wrong: true },\n              { id: person.id + \'-fm3\', isAudrey: false, thumb: SHARED_PEOPLE[(personIdx + 2) % SHARED_PEOPLE.length].thumb, is_wrong: true }\n            ],\n            media_total: 1,\n            media: [{\n              id: person.id,\n              title: person.name,\n              subtitle: person.source,\n              thumb: person.thumb,\n              type: person.type,\n              duration: person.duration || null\n            }]\n          });\n        };\n      })(person));\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Detail ── */\n  function openDetail() {\n    openDetailWithData(MOCK_IDENTITY);\n  }\n\n  function openDetailWithData(id) {\n    currentIdentity = id;  /* 記住當前人物 */\n    // 恢復 name 樣式（可能被 openNewIdentity 改過）\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    setText(\'msPplDetailName\',  id.name);\n    setText(\'msPplDetailActor\', id.description.actor);\n    setText(\'msPplDetailRole\',  id.description.role);\n    setText(\'msPplDetailNotes\', id.description.notes);\n\n    // Aliases chips (view mode)\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (id.aliases || []).forEach(function(a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var avatarSrc = id.isAudrey ? AUDREY_IMG_URL : (id.thumb || null);\n      if (avatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = avatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip(id.face_members || []);\n    renderMediaGrid(id.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = id.media_total\n        ? \'有出現 \' + id.name + \' 的影片照片，共 \' + id.media_total + \' 個檔案：\'\n        : \'\';\n    }\n\n    setVal(\'msPplEditName\',  id.name);\n    setVal(\'msPplEditActor\', id.description.actor);\n    setVal(\'msPplEditRole\',  id.description.role);\n    setVal(\'msPplEditNotes\', id.description.notes);\n    currentAliases = (id.aliases || []).slice();\n    renderAliases();\n\n    setEditMode(false);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderFaceStrip(members) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) {\n        var img = document.createElement(\'img\');\n        img.src = src;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function() { imgBox.innerHTML = SILHOUETTE_SVG; };\n        imgBox.appendChild(img);\n      } else {\n        imgBox.innerHTML = SILHOUETTE_SVG;\n      }\n\n      el.appendChild(imgBox);\n\n      // Right-click context menu\n      el.addEventListener(\'contextmenu\', function(e) {\n        e.preventDefault();\n        ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n\n      var thumbHtml;\n      if (item.thumb) {\n        thumbHtml =\n          \'<img src=\"\' + item.thumb + \'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\" \' +\n          \'onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\';\n      } else {\n        thumbHtml = SILHOUETTE_SVG;\n      }\n\n      var durHtml = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration/60) + \':\' + String(item.duration%60).padStart(2,\'0\') + \'</span>\'\n        : \'<span class=\"ms-ppl-media-dur\">—</span>\';\n\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' +\n          thumbHtml +\n          \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' +\n          durHtml +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n          \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n          \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ── Context Menu ── */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    // position\n    var menuW = 160, menuH = 80;\n    var vw = window.innerWidth, vh = window.innerHeight;\n    var left = x + menuW > vw ? x - menuW : x;\n    var top  = y + menuH > vh ? y - menuH : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function(e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) ctxNotThis.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      renderFaceStrip(currentIdentity.face_members);\n    }\n    hideCtxMenu();\n  });\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) ctxSplit.addEventListener(\'click\', function() {\n    if (ctxFmId && currentIdentity) {\n      var splitFm = currentIdentity.face_members.find(function(fm){ return fm.id === ctxFmId; });\n      currentIdentity.face_members = currentIdentity.face_members.filter(function(fm){ return fm.id !== ctxFmId; });\n      ctxFmId = null;\n      openNewIdentity(splitFm || { id: \'new-\' + Date.now(), isAudrey: false });\n    }\n    hideCtxMenu();\n  });\n\n  /* ── 另建人物：空白詳情頁 ── */\n  function openNewIdentity(fm) {\n    // 建立新的空白 identity 物件，設為 currentIdentity\n    var newIdentity = {\n      identity_id: \'id-new-\' + Date.now(),\n      name: \'\',\n      aliases: [],\n      description: { actor: \'\', role: \'\', notes: \'\' },\n      isAudrey: false,\n      thumb: fm.thumb || null,\n      face_members: [fm],\n      media_total: 0,\n      media: []\n    };\n    currentIdentity = newIdentity;\n\n    // 恢復 name 樣式\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) nameEl.style.cssText = \'\';\n\n    // view mode 顯示 placeholder 效果\n    var detailNameEl = document.getElementById(\'msPplDetailName\');\n    if (detailNameEl) {\n      detailNameEl.style.cssText =\n        \'font-size:20px;font-weight:700;color:#bdc1c6;\' +\n        \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;margin-bottom:10px;\';\n      detailNameEl.textContent = \'加入人名\';\n    }\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML =\n        \'<span style=\"\' +\n          \'display:inline-flex;align-items:center;gap:4px;\' +\n          \'border:1.5px dashed #bdc1c6;border-radius:999px;\' +\n          \'padding:3px 10px;\' +\n          \'font-family:\\\'DM Sans\\\',\\\'Noto Sans TC\\\',sans-serif;\' +\n          \'font-size:11.5px;color:#bdc1c6;cursor:pointer;\' +\n        \'\" id=\"msPplNewAliasHint\">＋ 新增標籤</span>\';\n    }\n\n    setText(\'msPplDetailActor\', \'\');\n    setText(\'msPplDetailRole\',  \'\');\n    setText(\'msPplDetailNotes\', \'\');\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var newAvatarSrc = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (newAvatarSrc) {\n        var img = document.createElement(\'img\');\n        img.src = newAvatarSrc;\n        img.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;\';\n        img.onerror = function(){ avatar.innerHTML = SILHOUETTE_SVG; };\n        avatar.appendChild(img);\n      } else {\n        avatar.innerHTML = SILHOUETTE_SVG;\n      }\n    }\n\n    renderFaceStrip([fm]);\n\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (grid) grid.innerHTML = \'\';\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) label.textContent = \'\';\n\n    // Edit fields 清空\n    setVal(\'msPplEditName\',  \'\');\n    setVal(\'msPplEditActor\', \'\');\n    setVal(\'msPplEditRole\',  \'\');\n    setVal(\'msPplEditNotes\', \'\');\n    currentAliases = [];\n    renderAliases();\n\n    setEditMode(true);\n    showView(\'msPplViewDetail\');\n\n    // 標記為新建模式\n    var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtnEl) {\n      saveBtnEl.dataset.mode = \'new\';\n      saveBtnEl.dataset.fmId = fm.id;\n    }\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  if (addAliasBtn) addAliasBtn.addEventListener(\'click\', function () {\n    var val = prompt(\'新增別名：\');\n    if (val && val.trim()) { currentAliases.push(val.trim()); renderAliases(); }\n  });\n\n  /* ── Edit mode ── */\n  function setEditMode(on) {\n    editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) editToggle.addEventListener(\'click\', function () {\n    if (!editMode && currentIdentity) {\n      // 進入 edit mode 前先把現有資料填入 fields\n      setVal(\'msPplEditName\',  currentIdentity.name);\n      setVal(\'msPplEditActor\', currentIdentity.description.actor);\n      setVal(\'msPplEditRole\',  currentIdentity.description.role);\n      setVal(\'msPplEditNotes\', currentIdentity.description.notes);\n      currentAliases = (currentIdentity.aliases || []).slice();\n      renderAliases();\n      // 清除 new mode flag（改為一般編輯）\n      var saveBtnEl = document.getElementById(\'msPplSaveBtn\');\n      if (saveBtnEl) { saveBtnEl.dataset.mode = \'\'; saveBtnEl.dataset.fmId = \'\'; }\n    }\n    setEditMode(!editMode);\n  });\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) saveBtn.addEventListener(\'click\', function () {\n    if (!currentIdentity) return;\n\n    // 把 edit fields 的值寫進 currentIdentity\n    currentIdentity.name             = getVal(\'msPplEditName\') || currentIdentity.name || \'未命名人物\';\n    currentIdentity.description.actor = getVal(\'msPplEditActor\');\n    currentIdentity.description.role  = getVal(\'msPplEditRole\');\n    currentIdentity.description.notes = getVal(\'msPplEditNotes\');\n    currentIdentity.aliases           = currentAliases.slice();\n    // 更新 thumb（用 avatar 裡已有的）\n    if (!currentIdentity.thumb && currentIdentity.face_members && currentIdentity.face_members[0]) {\n      currentIdentity.thumb = currentIdentity.face_members[0].thumb || null;\n    }\n\n    // 同步回 SHARED_PEOPLE（若有對應的）\n    var match = SHARED_PEOPLE.find(function(p){ return p.id === currentIdentity.identity_id; });\n    if (match) {\n      match.name        = currentIdentity.name;\n      match.role        = currentIdentity.description.role;\n      match.description = currentIdentity.description.notes;\n      match.people      = currentIdentity.aliases;\n    }\n\n    // 同步回 MOCK_UNASSIGNED name\n    var uMatch = MOCK_UNASSIGNED.find(function(u){ return u.id === currentIdentity.identity_id; });\n    if (uMatch) uMatch.name = currentIdentity.name;\n\n    // 清除 new mode flag\n    saveBtn.dataset.mode = \'\';\n    saveBtn.dataset.fmId = \'\';\n\n    // 重新渲染詳情頁（view mode）\n    openDetailWithData(currentIdentity);\n  });\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) cancelBtn.addEventListener(\'click\', function () {\n    if (currentIdentity) {\n      openDetailWithData(currentIdentity);\n    } else {\n      setEditMode(false);\n    }\n  });\n\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) backBtn.addEventListener(\'click\', function () { showView(\'msPplViewList\'); });\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function() {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n\n  // 排序 radio 變更時重新渲染 unassigned grid\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function(radio) {\n    radio.addEventListener(\'change\', function() {\n      renderUnassigned();\n      sortPanel.classList.remove(\'show\');\n    });\n  });\n\n  function getSortedUnassigned() {\n    var sort = (document.querySelector(\'input[name=\"ms-ppl-sort\"]:checked\') || {}).value || \'time\';\n    var items = MOCK_UNASSIGNED.slice();\n    if (sort === \'name\') {\n      items.sort(function(a, b) {\n        return (a.name || \'\').localeCompare(b.name || \'\', \'zh-TW\');\n      });\n    }\n    // \'time\' → 維持原始順序（index 順序即加入時間）\n    return items;\n  }\n\n  /* ── Modals ── */\n  function showModal(id) { var el=document.getElementById(id); if(el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el=document.getElementById(id); if(el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target===o) o.classList.remove(\'show\'); });\n  });\n\n  var mergeConfirm = document.getElementById(\'msPplMergeConfirm\');\n  if (mergeConfirm) mergeConfirm.addEventListener(\'click\', function () {\n    if (pendingMergeId) {\n      MOCK_CANDIDATES = MOCK_CANDIDATES.filter(function(c){ return c.id !== pendingMergeId; });\n      pendingMergeId = null;\n      renderCandidates();\n    }\n    hideModal(\'msPplMergeModal\');\n  });\n  var mergeCancel = document.getElementById(\'msPplMergeCancel\');\n  if (mergeCancel) mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); });\n\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) removeConfirm.addEventListener(\'click\', function () {\n    if (pendingRemoveFmId) {\n      MOCK_IDENTITY.face_members = MOCK_IDENTITY.face_members.filter(function(fm){ return fm.id !== pendingRemoveFmId; });\n      pendingRemoveFmId = null;\n      renderFaceStrip(MOCK_IDENTITY.face_members);\n    }\n    hideModal(\'msPplRemoveModal\');\n  });\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n\n  /* ── Helpers ── */\n  function setText(id, v) { var el=document.getElementById(id); if(el) el.textContent=v||\'—\'; }\n  function setVal(id, v)  { var el=document.getElementById(id); if(el) el.value=v||\'\'; }\n  function getVal(id)     { var el=document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ── Init ── */\n  renderCandidates();\n  renderUnassigned();\n})();\n</script>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-08 02:47:25','2026-05-08 02:47:25','',1359,'https://wp.momentry.ddns.net/?p=1467',0,'revision','',0),
(1468,6,'2026-05-08 09:46:36','2026-05-08 09:46:36','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 18px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:46:36','2026-05-08 09:46:36','',523,'https://wp.momentry.ddns.net/?p=1468',0,'revision','',0),
(1469,6,'2026-05-08 09:49:18','2026-05-08 09:49:18','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 15px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:49:18','2026-05-08 09:49:18','',523,'https://wp.momentry.ddns.net/?p=1469',0,'revision','',0),
(1470,6,'2026-05-08 09:49:29','2026-05-08 09:49:29','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 10px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:49:29','2026-05-08 09:49:29','',523,'https://wp.momentry.ddns.net/?p=1470',0,'revision','',0),
(1471,6,'2026-05-08 09:49:42','2026-05-08 09:49:42','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 6px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:49:42','2026-05-08 09:49:42','',523,'https://wp.momentry.ddns.net/?p=1471',0,'revision','',0),
(1472,6,'2026-05-08 09:49:54','2026-05-08 09:49:54','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 3px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:49:54','2026-05-08 09:49:54','',523,'https://wp.momentry.ddns.net/?p=1472',0,'revision','',0),
(1473,6,'2026-05-08 09:50:17','2026-05-08 09:50:17','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: -2px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:50:17','2026-05-08 09:50:17','',523,'https://wp.momentry.ddns.net/?p=1473',0,'revision','',0),
(1474,6,'2026-05-08 09:50:39','2026-05-08 09:50:39','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 5px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:50:39','2026-05-08 09:50:39','',523,'https://wp.momentry.ddns.net/?p=1474',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1475,6,'2026-05-08 09:51:06','2026-05-08 09:51:06','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 18px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 09:51:06','2026-05-08 09:51:06','',523,'https://wp.momentry.ddns.net/?p=1475',0,'revision','',0),
(1476,6,'2026-05-08 10:01:19','2026-05-08 10:01:19','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下移：只改位置，不改功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 6px !important;\n}\n\n#msP {\n  padding-bottom: 0 !important;\n}\n\n#msP .ibar {\n  padding-bottom: 0 !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:01:19','2026-05-08 10:01:19','',523,'https://wp.momentry.ddns.net/?p=1476',0,'revision','',0),
(1477,6,'2026-05-08 10:02:30','2026-05-08 10:02:30','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 12px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:02:30','2026-05-08 10:02:30','',523,'https://wp.momentry.ddns.net/?p=1477',0,'revision','',0),
(1478,6,'2026-05-08 10:02:50','2026-05-08 10:02:50','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 3px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:02:50','2026-05-08 10:02:50','',523,'https://wp.momentry.ddns.net/?p=1478',0,'revision','',0),
(1479,6,'2026-05-08 10:03:12','2026-05-08 10:03:12','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:03:12','2026-05-08 10:03:12','',523,'https://wp.momentry.ddns.net/?p=1479',0,'revision','',0),
(1480,6,'2026-05-08 10:03:31','2026-05-08 10:03:31','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: -3px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:03:31','2026-05-08 10:03:31','',523,'https://wp.momentry.ddns.net/?p=1480',0,'revision','',0),
(1481,6,'2026-05-08 10:03:49','2026-05-08 10:03:49','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:03:49','2026-05-08 10:03:49','',523,'https://wp.momentry.ddns.net/?p=1481',0,'revision','',0),
(1482,6,'2026-05-08 10:10:39','2026-05-08 10:10:39','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow: none !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:10:39','2026-05-08 10:10:39','',523,'https://wp.momentry.ddns.net/?p=1482',0,'revision','',0),
(1483,6,'2026-05-08 10:11:25','2026-05-08 10:11:25','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:11:25','2026-05-08 10:11:25','',523,'https://wp.momentry.ddns.net/?p=1483',0,'revision','',0),
(1484,6,'2026-05-08 10:11:47','2026-05-08 10:11:47','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n} \n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:11:47','2026-05-08 10:11:47','',523,'https://wp.momentry.ddns.net/?p=1484',0,'revision','',0),
(1485,6,'2026-05-08 10:12:46','2026-05-08 10:12:46','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:12:46','2026-05-08 10:12:46','',523,'https://wp.momentry.ddns.net/?p=1485',0,'revision','',0),
(1486,6,'2026-05-08 10:19:27','2026-05-08 10:19:27','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 右边底部 search bar：保留自然阴影 */\n#msP .iwrap {\n  border: 1px solid #f1f1f1 !important;\n  box-shadow: 0 4px 12px rgba(0,0,0,.05) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:19:27','2026-05-08 10:19:27','',523,'https://wp.momentry.ddns.net/?p=1486',0,'revision','',0),
(1487,6,'2026-05-08 10:19:41','2026-05-08 10:19:41','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边底部 search bar 往下，但保留一点空间，避免阴影被压扁 */\n.ms-main:has(#msP) {\n  padding-bottom: 0px !important;\n}\n\n/* ✅ 让 4-7 主画面底部不要额外撑高 */\n#msP {\n  padding-bottom: 0 !important;\n}\n\n/* ✅ 输入框位置往下，但保留自然阴影空间 */\n#msP .ibar {\n  padding-bottom: 4px !important;\n}\n\n/* ✅ 柔化底部 search bar 阴影，避免一圈灰框太明显 */\n#msP .iwrap {\n  box-shadow:\n    0 8px 22px rgba(0,0,0,.08),\n    0 1px 4px rgba(0,0,0,.04) !important;\n}\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 10:19:41','2026-05-08 10:19:41','',523,'https://wp.momentry.ddns.net/?p=1487',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1488,6,'2026-05-08 11:47:31','2026-05-08 11:47:31','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 0 0 4px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 62%, white),\n    0 12px 30px rgba(0,0,0,.08),\n    0 2px 6px rgba(0,0,0,.04) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 11:47:31','2026-05-08 11:47:31','',523,'https://wp.momentry.ddns.net/?p=1488',0,'revision','',0),
(1489,6,'2026-05-08 11:50:17','2026-05-08 11:50:17','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 11:50:17','2026-05-08 11:50:17','',523,'https://wp.momentry.ddns.net/?p=1489',0,'revision','',0),
(1490,6,'2026-05-08 12:26:10','2026-05-08 12:26:10','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n/* =========================================================\n   ✅ 给左边 sidebar history 使用：\n   AJAX 点击历史记录时，不刷新页面，也能恢复右边内容\n========================================================= */\nwindow.addEventListener(\'ms-force-restore-history\', function(ev){\n  try {\n    var picked = ev && ev.detail ? ev.detail : null;\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      sb();\n    }, 80);\n\n  } catch (err) {\n    console.warn(\'ms-force-restore-history failed\', err);\n  }\n});\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 12:26:10','2026-05-08 12:26:10','',523,'https://wp.momentry.ddns.net/?p=1490',0,'revision','',0),
(1491,6,'2026-05-08 12:26:35','2026-05-08 12:26:35','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n \n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n/* =========================================================\n   ✅ 给左边 sidebar history 使用：\n   AJAX 点击历史记录时，不刷新页面，也能恢复右边内容\n========================================================= */\nwindow.addEventListener(\'ms-force-restore-history\', function(ev){\n  try {\n    var picked = ev && ev.detail ? ev.detail : null;\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      sb();\n    }, 80);\n\n  } catch (err) {\n    console.warn(\'ms-force-restore-history failed\', err);\n  }\n});\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 12:26:35','2026-05-08 12:26:35','',523,'https://wp.momentry.ddns.net/?p=1491',0,'revision','',0),
(1492,6,'2026-05-08 12:26:50','2026-05-08 12:26:50','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); });\n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 12:26:50','2026-05-08 12:26:50','',523,'https://wp.momentry.ddns.net/?p=1492',0,'revision','',0),
(1493,6,'2026-05-08 12:27:29','2026-05-08 12:27:29','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 12:27:29','2026-05-08 12:27:29','',523,'https://wp.momentry.ddns.net/?p=1493',0,'revision','',0),
(1494,6,'2026-05-08 12:28:46','2026-05-08 12:28:46','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      sb();\n    }, 100);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 12:28:46','2026-05-08 12:28:46','',523,'https://wp.momentry.ddns.net/?p=1494',0,'revision','',0),
(1495,1,'2026-05-08 12:44:48','2026-05-08 12:44:48','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Evaluation 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Evaluation </h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Evaluation -WW','','inherit','closed','closed','','1035-revision-v1','','','2026-05-08 12:44:48','2026-05-08 12:44:48','',1035,'https://wp.momentry.ddns.net/?p=1495',0,'revision','',0),
(1496,6,'2026-05-08 13:47:57','2026-05-08 13:47:57','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','WW - 04-07 對話結果顯示','','inherit','closed','closed','','523-revision-v1','','','2026-05-08 13:47:57','2026-05-08 13:47:57','',523,'https://wp.momentry.ddns.net/?p=1496',0,'revision','',0),
(1497,6,'2026-05-08 14:10:05','2026-05-08 14:10:05','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"size_desc\"> 依大小・由大到小</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"size_asc\"> 依大小・由小到大</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpNotInPeopleSet\"> 未加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpInPeopleSet\"> 已加入識別集</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <div class=\"mp-filter-title\">時間</div>\n      <div class=\"mp-filter-note\" id=\"mpTimeText\">2023/011/29 ～ 2026/01/04</div>\n\n      <div class=\"mp-filter-title\">大小</div>\n      <div class=\"mp-range-wrap\">\n        <input type=\"range\" id=\"mpSizeMin\" min=\"0\" max=\"5120\" value=\"11\" step=\"1\">\n        <input type=\"range\" id=\"mpSizeMax\" min=\"0\" max=\"5120\" value=\"5120\" step=\"1\">\n      </div>\n      <div class=\"mp-range-label\">\n        <span id=\"mpSizeMinText\">11KB</span>\n        <span id=\"mpSizeMaxText\">5MB</span>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n      <div class=\"mp-range-wrap\">\n        <input type=\"range\" id=\"mpDurationMin\" min=\"0\" max=\"600\" value=\"180\" step=\"1\">\n        <input type=\"range\" id=\"mpDurationMax\" min=\"0\" max=\"600\" value=\"600\" step=\"1\">\n      </div>\n      <div class=\"mp-range-label\">\n        <span id=\"mpDurationMinText\">3分鐘</span>\n        <span id=\"mpDurationMaxText\">不限</span>\n      </div>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n/* 新增：紅框內的時間 / 大小 / 影片時長 */\n.mp-filter-note{\n  font-size:14px;\n  color:#6b7280;\n  margin:0 0 18px;\n  letter-spacing:.3px;\n}\n\n.mp-range-wrap{\n  position:relative;\n  height:24px;\n  margin:2px 0 2px;\n}\n\n.mp-range-wrap input[type=\"range\"]{\n  position:absolute;\n  left:0;\n  top:8px;\n  width:100%;\n  margin:0;\n  padding:0;\n  height:8px;\n  background:transparent;\n  pointer-events:none;\n  -webkit-appearance:none;\n  appearance:none;\n}\n\n.mp-range-wrap input[type=\"range\"]::-webkit-slider-runnable-track{\n  height:6px;\n  border-radius:999px;\n  background:#d6d6d6;\n}\n\n.mp-range-wrap input[type=\"range\"]::-webkit-slider-thumb{\n  -webkit-appearance:none;\n  appearance:none;\n  width:16px;\n  height:16px;\n  border-radius:50%;\n  background:#8e8e8e;\n  margin-top:-5px;\n  cursor:pointer;\n  pointer-events:auto;\n  border:none;\n}\n\n.mp-range-wrap input[type=\"range\"]::-moz-range-track{\n  height:6px;\n  border-radius:999px;\n  background:#d6d6d6;\n}\n\n.mp-range-wrap input[type=\"range\"]::-moz-range-thumb{\n  width:16px;\n  height:16px;\n  border-radius:50%;\n  background:#8e8e8e;\n  cursor:pointer;\n  pointer-events:auto;\n  border:none;\n}\n\n.mp-range-label{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-size:11px;\n  color:#6b7280;\n  margin:0 0 18px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const notInPeopleSet = root.querySelector(\'#mpNotInPeopleSet\');\n  const inPeopleSet = root.querySelector(\'#mpInPeopleSet\');\n\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const sizeMinInput = root.querySelector(\'#mpSizeMin\');\n  const sizeMaxInput = root.querySelector(\'#mpSizeMax\');\n  const sizeMinText = root.querySelector(\'#mpSizeMinText\');\n  const sizeMaxText = root.querySelector(\'#mpSizeMaxText\');\n\n  const durationMinInput = root.querySelector(\'#mpDurationMin\');\n  const durationMaxInput = root.querySelector(\'#mpDurationMax\');\n  const durationMinText = root.querySelector(\'#mpDurationMinText\');\n  const durationMaxText = root.querySelector(\'#mpDurationMaxText\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function formatSize(kb){\n    const n = Number(kb || 0);\n    if (n >= 1024) {\n      const mb = n / 1024;\n      return mb >= 10 ? Math.round(mb) + \'MB\' : mb.toFixed(mb % 1 === 0 ? 0 : 1) + \'MB\';\n    }\n    return Math.round(n) + \'KB\';\n  }\n\n  function formatDuration(sec, isMax){\n    const n = Number(sec || 0);\n    if (isMax && n >= 600) return \'不限\';\n    if (n < 60) return Math.round(n) + \'秒\';\n    return Math.round(n / 60) + \'分鐘\';\n  }\n\n  function syncRangeLabels(){\n    if (sizeMinInput && sizeMaxInput) {\n      let min = Number(sizeMinInput.value || 0);\n      let max = Number(sizeMaxInput.value || 5120);\n\n      if (min > max) {\n        const temp = min;\n        min = max;\n        max = temp;\n      }\n\n      if (sizeMinText) sizeMinText.textContent = formatSize(min);\n      if (sizeMaxText) sizeMaxText.textContent = formatSize(max);\n    }\n\n    if (durationMinInput && durationMaxInput) {\n      let min = Number(durationMinInput.value || 0);\n      let max = Number(durationMaxInput.value || 600);\n\n      if (min > max) {\n        const temp = min;\n        min = max;\n        max = temp;\n      }\n\n      if (durationMinText) durationMinText.textContent = formatDuration(min, false);\n      if (durationMaxText) durationMaxText.textContent = formatDuration(max, true);\n    }\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\',\n      sizeKB:520,\n      duration:0,\n      inPeopleSet:true\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:205,\n      createdAt:\'2026-01-03\',\n      sizeKB:2048,\n      inPeopleSet:true\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\',\n      sizeKB:860,\n      duration:0,\n      inPeopleSet:false\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:420,\n      createdAt:\'2026-01-01\',\n      sizeKB:5120,\n      inPeopleSet:false\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\',\n      sizeKB:11,\n      duration:0,\n      inPeopleSet:true\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\',\n      sizeKB:3400,\n      inPeopleSet:false\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">時間：${escapeHtml(item.createdAt)}</div>\n              <div class=\"mp-detail-row\">大小：${escapeHtml(formatSize(item.sizeKB))}</div>\n              <div class=\"mp-detail-row\">影片時長：${item.type === \'video\' ? escapeHtml(formatDuration(item.duration, false)) : \'—\'}</div>\n              <div class=\"mp-detail-row\">識別集：${item.inPeopleSet ? \'已加入\' : \'未加入\'}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    syncRangeLabels();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let sizeMin = sizeMinInput ? Number(sizeMinInput.value || 0) : 0;\n    let sizeMax = sizeMaxInput ? Number(sizeMaxInput.value || 5120) : 5120;\n\n    if (sizeMin > sizeMax) {\n      const temp = sizeMin;\n      sizeMin = sizeMax;\n      sizeMax = temp;\n    }\n\n    let durationMin = durationMinInput ? Number(durationMinInput.value || 0) : 0;\n    let durationMax = durationMaxInput ? Number(durationMaxInput.value || 600) : 600;\n\n    if (durationMin > durationMax) {\n      const temp = durationMin;\n      durationMin = durationMax;\n      durationMax = temp;\n    }\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      if (notInPeopleSet && notInPeopleSet.checked && item.inPeopleSet === true) visible = false;\n      if (inPeopleSet && inPeopleSet.checked && item.inPeopleSet !== true) visible = false;\n\n      const itemSize = Number(item.sizeKB || 0);\n      if (itemSize < sizeMin || itemSize > sizeMax) visible = false;\n\n      if (item.type === \'video\') {\n        const itemDuration = Number(item.duration || 0);\n        if (itemDuration < durationMin || itemDuration > durationMax) visible = false;\n      }\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      if (sort === \'size_desc\') return Number(b.sizeKB || 0) - Number(a.sizeKB || 0);\n      if (sort === \'size_asc\') return Number(a.sizeKB || 0) - Number(b.sizeKB || 0);\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (notInPeopleSet) {\n    notInPeopleSet.addEventListener(\'change\', function(){\n      if (notInPeopleSet.checked && inPeopleSet) inPeopleSet.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (inPeopleSet) {\n    inPeopleSet.addEventListener(\'change\', function(){\n      if (inPeopleSet.checked && notInPeopleSet) notInPeopleSet.checked = false;\n      applyFilters();\n    });\n  }\n\n  [sizeMinInput, sizeMaxInput, durationMinInput, durationMaxInput].forEach(function(input){\n    if (!input) return;\n    input.addEventListener(\'input\', applyFilters);\n  });\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n      if (notInPeopleSet) notInPeopleSet.checked = false;\n      if (inPeopleSet) inPeopleSet.checked = false;\n\n      if (sizeMinInput) sizeMinInput.value = 11;\n      if (sizeMaxInput) sizeMaxInput.value = 5120;\n      if (durationMinInput) durationMinInput.value = 180;\n      if (durationMaxInput) durationMaxInput.value = 600;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  syncRangeLabels();\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:10:05','2026-05-08 14:10:05','',1356,'https://wp.momentry.ddns.net/?p=1497',0,'revision','',0),
(1498,6,'2026-05-08 14:10:24','2026-05-08 14:10:24','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:10:24','2026-05-08 14:10:24','',1356,'https://wp.momentry.ddns.net/?p=1498',0,'revision','',0),
(1499,6,'2026-05-08 14:12:17','2026-05-08 14:12:17','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <!-- 只新增紅框這一段：時間 / 大小 / 影片時長 -->\n      <div class=\"mp-filter-extra\">\n        <div class=\"mp-filter-title\">時間</div>\n        <div class=\"mp-filter-date-text\">2023/011/29 ～ 2026/01/04</div>\n\n        <div class=\"mp-filter-title\">大小</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpSizeRange\" min=\"0\" max=\"5120\" value=\"5120\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>11KB</span>\n          <span id=\"mpSizeRangeText\">5MB</span>\n        </div>\n\n        <div class=\"mp-filter-title\">影片時長</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpDurationRange\" min=\"0\" max=\"600\" value=\"600\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>3分鐘</span>\n          <span id=\"mpDurationRangeText\">不限</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n/* 只新增紅框區塊樣式 */\n.mp-filter-extra{\n  margin-top:12px;\n}\n\n.mp-filter-date-text{\n  font-size:14px;\n  color:#6b7280;\n  margin:0 0 18px;\n  letter-spacing:.3px;\n}\n\n.mp-simple-range{\n  width:100%;\n  margin:0 0 2px;\n}\n\n.mp-simple-range input[type=\"range\"]{\n  width:100%;\n  height:18px;\n  margin:0;\n  padding:0;\n  accent-color:#8e8e8e;\n  cursor:pointer;\n}\n\n.mp-simple-range-label{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#6b7280;\n  margin:0 0 18px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  const sizeRange = root.querySelector(\'#mpSizeRange\');\n  const sizeRangeText = root.querySelector(\'#mpSizeRangeText\');\n  const durationRange = root.querySelector(\'#mpDurationRange\');\n  const durationRangeText = root.querySelector(\'#mpDurationRangeText\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function formatSize(kb){\n    const n = Number(kb || 0);\n    if (n >= 1024) {\n      const mb = n / 1024;\n      return mb >= 10 ? Math.round(mb) + \'MB\' : mb.toFixed(mb % 1 === 0 ? 0 : 1) + \'MB\';\n    }\n    return Math.round(n) + \'KB\';\n  }\n\n  function formatDuration(sec){\n    const n = Number(sec || 0);\n    if (n >= 600) return \'不限\';\n    if (n < 60) return Math.round(n) + \'秒\';\n    return Math.round(n / 60) + \'分鐘\';\n  }\n\n  function updateRangeText(){\n    if (sizeRange && sizeRangeText) {\n      sizeRangeText.textContent = formatSize(sizeRange.value);\n    }\n\n    if (durationRange && durationRangeText) {\n      durationRangeText.textContent = formatDuration(durationRange.value);\n    }\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\',\n      sizeKB:520,\n      duration:0\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:205,\n      createdAt:\'2026-01-03\',\n      sizeKB:2048\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\',\n      sizeKB:860,\n      duration:0\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:420,\n      createdAt:\'2026-01-01\',\n      sizeKB:5120\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\',\n      sizeKB:11,\n      duration:0\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\',\n      sizeKB:3400\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n    const maxSize = sizeRange ? Number(sizeRange.value || 5120) : 5120;\n    const maxDuration = durationRange ? Number(durationRange.value || 600) : 600;\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      if (Number(item.sizeKB || 0) > maxSize) visible = false;\n\n      if (item.type === \'video\' && Number(item.duration || 0) > maxDuration) {\n        visible = false;\n      }\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (sizeRange) {\n    sizeRange.addEventListener(\'input\', applyFilters);\n  }\n\n  if (durationRange) {\n    durationRange.addEventListener(\'input\', applyFilters);\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n      if (sizeRange) sizeRange.value = 5120;\n      if (durationRange) durationRange.value = 600;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  updateRangeText();\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:12:17','2026-05-08 14:12:17','',1356,'https://wp.momentry.ddns.net/?p=1499',0,'revision','',0),
(1500,6,'2026-05-08 14:17:20','2026-05-08 14:17:20','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <!-- 只新增紅框這一段：時間 / 大小 / 影片時長 -->\n      <div class=\"mp-filter-extra\">\n        <div class=\"mp-filter-title\">時間</div>\n        <div class=\"mp-filter-date-text\">2023/011/29 ～ 2026/01/04</div>\n\n        <div class=\"mp-filter-title\">大小</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpSizeRange\" min=\"0\" max=\"5120\" value=\"5120\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>11KB</span>\n          <span id=\"mpSizeRangeText\">5MB</span>\n        </div>\n\n        <div class=\"mp-filter-title\">影片時長</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpDurationRange\" min=\"0\" max=\"600\" value=\"600\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>3分鐘</span>\n          <span id=\"mpDurationRangeText\">不限</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n/* 只新增紅框區塊樣式 */\n.mp-filter-extra{\n  margin-top:12px;\n}\n\n.mp-filter-date-text{\n  font-size:14px;\n  color:#6b7280;\n  margin:0 0 18px;\n  letter-spacing:.3px;\n}\n\n.mp-simple-range{\n  width:100%;\n  margin:0 0 2px;\n}\n\n.mp-simple-range input[type=\"range\"]{\n  width:100%;\n  height:18px;\n  margin:0;\n  padding:0;\n  accent-color:#8e8e8e;\n  cursor:pointer;\n}\n\n.mp-simple-range-label{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#6b7280;\n  margin:0 0 18px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  const sizeRange = root.querySelector(\'#mpSizeRange\');\n  const sizeRangeText = root.querySelector(\'#mpSizeRangeText\');\n  const durationRange = root.querySelector(\'#mpDurationRange\');\n  const durationRangeText = root.querySelector(\'#mpDurationRangeText\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function formatSize(kb){\n    const n = Number(kb || 0);\n    if (n >= 1024) {\n      const mb = n / 1024;\n      return mb >= 10 ? Math.round(mb) + \'MB\' : mb.toFixed(mb % 1 === 0 ? 0 : 1) + \'MB\';\n    }\n    return Math.round(n) + \'KB\';\n  }\n\n  function formatDuration(sec){\n    const n = Number(sec || 0);\n    if (n >= 600) return \'不限\';\n    if (n < 60) return Math.round(n) + \'秒\';\n    return Math.round(n / 60) + \'分鐘\';\n  }\n\n  function updateRangeText(){\n    if (sizeRange && sizeRangeText) {\n      sizeRangeText.textContent = formatSize(sizeRange.value);\n    }\n\n    if (durationRange && durationRangeText) {\n      durationRangeText.textContent = formatDuration(durationRange.value);\n    }\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\',\n      sizeKB:520,\n      duration:0\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:205,\n      createdAt:\'2026-01-03\',\n      sizeKB:2048\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\',\n      sizeKB:860,\n      duration:0\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:420,\n      createdAt:\'2026-01-01\',\n      sizeKB:5120\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\',\n      sizeKB:11,\n      duration:0\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\',\n      sizeKB:3400\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    updateRangeText();\n\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n    const maxSize = sizeRange ? Number(sizeRange.value || 5120) : 5120;\n    const maxDuration = durationRange ? Number(durationRange.value || 600) : 600;\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      // 目前紅框的大小 / 影片時長先只做畫面顯示，不參與篩選\n// 等之後接 API、有真實 size / duration 欄位後，再打開下面篩選邏輯\n\n// if (Number(item.sizeKB || 0) > maxSize) visible = false;\n\n// if (item.type === \'video\' && Number(item.duration || 0) > maxDuration) {\n//   visible = false;\n// }\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (sizeRange) {\n    sizeRange.addEventListener(\'input\', applyFilters);\n  }\n\n  if (durationRange) {\n    durationRange.addEventListener(\'input\', applyFilters);\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n      if (sizeRange) sizeRange.value = 5120;\n      if (durationRange) durationRange.value = 600;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  updateRangeText();\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:17:20','2026-05-08 14:17:20','',1356,'https://wp.momentry.ddns.net/?p=1500',0,'revision','',0),
(1501,6,'2026-05-08 14:17:36','2026-05-08 14:17:36','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:17:36','2026-05-08 14:17:36','',1356,'https://wp.momentry.ddns.net/?p=1501',0,'revision','',0),
(1502,6,'2026-05-08 14:22:28','2026-05-08 14:22:28','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n\n      <!-- 新增：紅框裡的時間 / 大小 / 影片時長，目前只顯示，不參與篩選 -->\n      <div class=\"mp-filter-extra\">\n        <div class=\"mp-filter-title\">時間</div>\n        <div class=\"mp-filter-date-text\">2023/011/29 ～ 2026/01/04</div>\n\n        <div class=\"mp-filter-title\">大小</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpSizeRange\" min=\"0\" max=\"5120\" value=\"5120\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>11KB</span>\n          <span id=\"mpSizeRangeText\">5MB</span>\n        </div>\n\n        <div class=\"mp-filter-title\">影片時長</div>\n        <div class=\"mp-simple-range\">\n          <input type=\"range\" id=\"mpDurationRange\" min=\"0\" max=\"600\" value=\"600\" step=\"1\">\n        </div>\n        <div class=\"mp-simple-range-label\">\n          <span>3分鐘</span>\n          <span id=\"mpDurationRangeText\">不限</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n/* 新增：紅框區塊樣式，不影響原本功能 */\n.mp-filter-extra{\n  margin-top:12px;\n}\n\n.mp-filter-date-text{\n  font-size:14px;\n  color:#6b7280;\n  margin:0 0 18px;\n  letter-spacing:.3px;\n}\n\n.mp-simple-range{\n  width:100%;\n  margin:0 0 2px;\n}\n\n.mp-simple-range input[type=\"range\"]{\n  width:100%;\n  height:18px;\n  margin:0;\n  padding:0;\n  accent-color:#8e8e8e;\n  cursor:pointer;\n}\n\n.mp-simple-range-label{\n  display:flex;\n  justify-content:space-between;\n  font-size:11px;\n  color:#6b7280;\n  margin:0 0 18px;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  const sizeRange = root.querySelector(\'#mpSizeRange\');\n  const sizeRangeText = root.querySelector(\'#mpSizeRangeText\');\n  const durationRange = root.querySelector(\'#mpDurationRange\');\n  const durationRangeText = root.querySelector(\'#mpDurationRangeText\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function formatSize(kb){\n    const n = Number(kb || 0);\n    if (n >= 1024) {\n      const mb = n / 1024;\n      return mb >= 10 ? Math.round(mb) + \'MB\' : mb.toFixed(mb % 1 === 0 ? 0 : 1) + \'MB\';\n    }\n    return Math.round(n) + \'KB\';\n  }\n\n  function formatDuration(sec){\n    const n = Number(sec || 0);\n    if (n >= 600) return \'不限\';\n    if (n < 60) return Math.round(n) + \'秒\';\n    return Math.round(n / 60) + \'分鐘\';\n  }\n\n  function updateRangeText(){\n    if (sizeRange && sizeRangeText) {\n      sizeRangeText.textContent = formatSize(sizeRange.value);\n    }\n\n    if (durationRange && durationRangeText) {\n      durationRangeText.textContent = formatDuration(durationRange.value);\n    }\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (sizeRange) {\n    sizeRange.addEventListener(\'input\', function(){\n      updateRangeText();\n    });\n  }\n\n  if (durationRange) {\n    durationRange.addEventListener(\'input\', function(){\n      updateRangeText();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n      if (sizeRange) sizeRange.value = 5120;\n      if (durationRange) durationRange.value = 600;\n\n      updateRangeText();\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  updateRangeText();\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:22:28','2026-05-08 14:22:28','',1356,'https://wp.momentry.ddns.net/?p=1502',0,'revision','',0),
(1503,6,'2026-05-08 14:22:57','2026-05-08 14:22:57','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋人物 / 電影\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  allItems = [\n    {\n      id:\'p001\',\n      type:\'photo\',\n      name:\'林夏 Luna Lin\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女主角\',\'記憶修復師\'],\n      movie:\'Memory City\',\n      role:\'女主角\',\n      description:\'冷靜、敏銳，負責尋找城市中被遺失的記憶片段。\',\n      createdAt:\'2026-01-04\'\n    },\n    {\n      id:\'p002\',\n      type:\'video\',\n      name:\'陳凱 Kai Chen\',\n      source:\'電影：Memory City\',\n      thumb:\'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'男主角\',\'資料探員\'],\n      movie:\'Memory City\',\n      role:\'男主角\',\n      description:\'前情報分析師，協助女主角解開資料庫中的身份謎團。\',\n      duration:25,\n      createdAt:\'2026-01-03\'\n    },\n    {\n      id:\'p003\',\n      type:\'photo\',\n      name:\'Mia Wong\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'配角\',\'記者\'],\n      movie:\'Blue Night\',\n      role:\'配角\',\n      description:\'追查失蹤案件的記者，掌握關鍵線索。\',\n      createdAt:\'2026-01-02\'\n    },\n    {\n      id:\'p004\',\n      type:\'video\',\n      name:\'Ryan Xu\',\n      source:\'電影：Blue Night\',\n      thumb:\'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'反派\',\'企業繼承人\'],\n      movie:\'Blue Night\',\n      role:\'反派\',\n      description:\'外表優雅，實際操控地下資料交易。\',\n      duration:48,\n      createdAt:\'2026-01-01\'\n    },\n    {\n      id:\'p005\',\n      type:\'photo\',\n      name:\'安娜 Anna Lee\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'女配角\',\'港口醫師\'],\n      movie:\'Silent Harbor\',\n      role:\'女配角\',\n      description:\'在港口診所工作的醫師，知道主角過去的秘密。\',\n      createdAt:\'2025-12-30\'\n    },\n    {\n      id:\'p006\',\n      type:\'video\',\n      name:\'David Park\',\n      source:\'電影：Silent Harbor\',\n      thumb:\'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?q=80&w=1200&auto=format&fit=crop\',\n      people:[\'警探\',\'關鍵人物\'],\n      movie:\'Silent Harbor\',\n      role:\'警探\',\n      description:\'負責調查港口命案，逐步接近真相。\',\n      duration:36,\n      createdAt:\'2025-12-28\'\n    }\n  ];\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的人物資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            <img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">\n            <span class=\"mp-badge-type\">${item.type === \'video\' ? \'VIDEO\' : \'PHOTO\'}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              ${(item.people || []).map(p => `<span class=\"mp-person-chip\">${escapeHtml(p)}</span>`).join(\'\')}\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">人物底層資料</div>\n              <div class=\"mp-detail-row\">人物 ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">人物名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">電影：${escapeHtml(item.movie)}</div>\n              <div class=\"mp-detail-row\">角色：${escapeHtml(item.role)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">描述：${escapeHtml(item.description)}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.source,\n        item.movie,\n        item.role,\n        item.description,\n        item.type,\n        ...(item.people || [])\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      applyFilters();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的人物\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  renderItems(allItems);\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-08 14:22:57','2026-05-08 14:22:57','',1356,'https://wp.momentry.ddns.net/?p=1503',0,'revision','',0),
(1505,1,'2026-05-09 10:26:26','2026-05-09 10:26:26','<!-- wp:shortcode -->\n[momentry_api_dashboard_v8]\n<!-- /wp:shortcode -->','API console','','trash','closed','closed','','api-console__trashed','','','2026-05-22 03:49:22','2026-05-22 03:49:22','',0,'https://wp.momentry.ddns.net/?page_id=1505',0,'page','',0),
(1506,1,'2026-05-09 10:26:26','2026-05-09 10:26:26','<!-- wp:shortcode -->\n[momentry_api_dashboard]\n<!-- /wp:shortcode -->','','','inherit','closed','closed','','1505-revision-v1','','','2026-05-09 10:26:26','2026-05-09 10:26:26','',1505,'https://wp.momentry.ddns.net/?p=1506',0,'revision','',0),
(1507,1,'2026-05-09 10:26:46','2026-05-09 10:26:46','<!-- wp:shortcode -->\n[momentry_api_dashboard]\n<!-- /wp:shortcode -->','API_Test_SC','','inherit','closed','closed','','1505-revision-v1','','','2026-05-09 10:26:46','2026-05-09 10:26:46','',1505,'https://wp.momentry.ddns.net/?p=1507',0,'revision','',0),
(1508,6,'2026-05-11 07:29:49','2026-05-11 07:29:49','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / 圖片\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n\n<script>\n(function(){\n  const root = document.getElementById(\'ms-files-page\');\n  if (!root) return;\n\n  const grid = root.querySelector(\'#mpGrid\');\n  const status = root.querySelector(\'#mpStatus\');\n\n  const filterBtn = root.querySelector(\'#mpToggleFilter\');\n  const filterPop = root.querySelector(\'#mpFilterPop\');\n\n  const selectAll = root.querySelector(\'#mpSelectAll\');\n  const selectVideos = root.querySelector(\'#mpSelectVideos\');\n  const selectPhotos = root.querySelector(\'#mpSelectPhotos\');\n\n  const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n  const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n  const searchInput = root.querySelector(\'#mpSearchInput\');\n\n  const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n  const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n  const MEDIA_API =\n    window.location.origin +\n    \'/wp-json/wp/v2/media?per_page=20&orderby=date&order=desc&_fields=id,date,slug,title,caption,alt_text,media_type,mime_type,source_url,link,media_details\';\n\n  let allItems = [];\n\n  function showStatus(text){\n    if (!status) return;\n    status.textContent = text || \'\';\n    status.classList.toggle(\'show\', !!text);\n  }\n\n  function escapeHtml(str){\n    return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n      return ({\n        \'&\':\'&amp;\',\n        \'<\':\'&lt;\',\n        \'>\':\'&gt;\',\n        \'\"\':\'&quot;\',\n        \"\'\":\'&#039;\'\n      })[m];\n    });\n  }\n\n  function stripHtml(str){\n    return String(str || \'\').replace(/<[^>]*>/g, \'\').trim();\n  }\n\n  function getTitle(item){\n    if (item.title && item.title.rendered) return stripHtml(item.title.rendered);\n    if (item.slug) return item.slug;\n    return \'Untitled file\';\n  }\n\n  function getFileNameFromUrl(url){\n    try {\n      const clean = String(url || \'\').split(\'?\')[0];\n      const name = clean.substring(clean.lastIndexOf(\'/\') + 1);\n      return decodeURIComponent(name || \'\');\n    } catch(e) {\n      return \'\';\n    }\n  }\n\n  function getExtension(url, mime){\n    const fileName = getFileNameFromUrl(url);\n    if (fileName && fileName.includes(\'.\')) {\n      return fileName.split(\'.\').pop().toLowerCase();\n    }\n\n    if (mime && mime.includes(\'/\')) {\n      return mime.split(\'/\').pop().toLowerCase();\n    }\n\n    return \'file\';\n  }\n\n  function formatBytes(bytes){\n    const n = Number(bytes || 0);\n    if (!n) return \'-\';\n\n    if (n < 1024) return n + \' B\';\n    if (n < 1024 * 1024) return Math.round(n / 1024) + \' KB\';\n\n    return (n / 1024 / 1024).toFixed(1).replace(\'.0\',\'\') + \' MB\';\n  }\n\n  function formatDate(dateStr){\n    if (!dateStr) return \'-\';\n\n    try {\n      const d = new Date(dateStr);\n      if (isNaN(d.getTime())) return dateStr;\n\n      const y = d.getFullYear();\n      const m = String(d.getMonth() + 1).padStart(2, \'0\');\n      const day = String(d.getDate()).padStart(2, \'0\');\n\n      return y + \'-\' + m + \'-\' + day;\n    } catch(e) {\n      return dateStr;\n    }\n  }\n\n  function getDisplayType(mediaType, mime){\n    if (mediaType === \'image\') return \'photo\';\n    if (mediaType === \'video\') return \'video\';\n    if (mediaType === \'audio\') return \'audio\';\n\n    if (mime && mime.indexOf(\'pdf\') !== -1) return \'document\';\n    if (mime && mime.indexOf(\'text\') !== -1) return \'document\';\n\n    return \'file\';\n  }\n\n  function getTypeLabel(type){\n    if (type === \'photo\') return \'PHOTO\';\n    if (type === \'video\') return \'VIDEO\';\n    if (type === \'audio\') return \'AUDIO\';\n    if (type === \'document\') return \'DOC\';\n    return \'FILE\';\n  }\n\n  function getDocIcon(type, ext){\n    if (type === \'video\') return \'🎬\';\n    if (type === \'audio\') return \'🎧\';\n    if (ext === \'pdf\') return \'📄\';\n    if (ext === \'txt\' || ext === \'md\') return \'📃\';\n    if (ext === \'doc\' || ext === \'docx\') return \'📝\';\n    if (ext === \'xls\' || ext === \'xlsx\' || ext === \'csv\') return \'📊\';\n    if (ext === \'ppt\' || ext === \'pptx\') return \'📑\';\n    return \'📦\';\n  }\n\n  function getThumbUrl(item){\n    const sizes = item.media_details && item.media_details.sizes;\n\n    if (sizes) {\n      if (sizes.medium && sizes.medium.source_url) return sizes.medium.source_url;\n      if (sizes.thumbnail && sizes.thumbnail.source_url) return sizes.thumbnail.source_url;\n      if (sizes.full && sizes.full.source_url) return sizes.full.source_url;\n    }\n\n    if (item.media_type === \'image\') return item.source_url || \'\';\n\n    return \'\';\n  }\n\n  function mapMediaItem(item){\n    const title = getTitle(item);\n    const fileName = getFileNameFromUrl(item.source_url) || title;\n    const ext = getExtension(item.source_url, item.mime_type);\n    const type = getDisplayType(item.media_type, item.mime_type);\n    const thumb = getThumbUrl(item);\n    const caption = stripHtml(item.caption && item.caption.rendered ? item.caption.rendered : \'\');\n\n    return {\n      id: String(item.id),\n      type: type,\n      name: fileName || title,\n      title: title,\n      source: \'Media Library\',\n      thumb: thumb,\n      url: item.source_url || \'\',\n      link: item.link || \'\',\n      mime: item.mime_type || \'\',\n      ext: ext,\n      size: item.media_details && item.media_details.filesize ? item.media_details.filesize : \'\',\n      width: item.media_details && item.media_details.width ? item.media_details.width : \'\',\n      height: item.media_details && item.media_details.height ? item.media_details.height : \'\',\n      description: caption || item.alt_text || \'\',\n      createdAt: item.date || \'\'\n    };\n  }\n\n  async function loadMediaItems(){\n    showStatus(\'正在載入 Media Library 最新 20 個檔案...\');\n\n    try {\n      const res = await fetch(MEDIA_API, {\n        method:\'GET\',\n        credentials:\'same-origin\'\n      });\n\n      if (!res.ok) {\n        throw new Error(\'Media API failed: \' + res.status);\n      }\n\n      const data = await res.json();\n\n      allItems = Array.isArray(data) ? data.map(mapMediaItem) : [];\n\n      if (!allItems.length) {\n        showStatus(\'Media Library 目前沒有可顯示的檔案。\');\n        renderItems([]);\n        return;\n      }\n\n      applyFilters();\n\n    } catch(err) {\n      console.error(err);\n      allItems = [];\n      renderItems([]);\n      showStatus(\'讀取 Media Library 失敗。請確認目前頁面可以存取 WordPress REST API。\');\n    }\n  }\n\n  function renderThumb(item){\n    if (item.thumb) {\n      return `<img src=\"${escapeHtml(item.thumb)}\" alt=\"${escapeHtml(item.name)}\">`;\n    }\n\n    return `\n      <div class=\"mp-doc-thumb\">\n        <div class=\"mp-doc-icon\">${getDocIcon(item.type, item.ext)}</div>\n        <div class=\"mp-doc-ext\">${escapeHtml(item.ext || item.type || \'file\')}</div>\n      </div>\n    `;\n  }\n\n  function renderItems(items){\n    if (!grid) return;\n\n    if (!items.length) {\n      grid.innerHTML = \'\';\n      showStatus(\'沒有符合條件的檔案資料。\');\n      syncTopCheckboxes();\n      return;\n    }\n\n    showStatus(\'\');\n\n    grid.innerHTML = items.map(item => {\n      return `\n        <article class=\"mp-file-card\"\n          data-id=\"${escapeHtml(item.id)}\"\n          data-type=\"${escapeHtml(item.type)}\"\n          data-name=\"${escapeHtml(item.name)}\"\n          data-source=\"${escapeHtml(item.source)}\">\n\n          <div class=\"mp-thumb-wrap\">\n            ${renderThumb(item)}\n            <span class=\"mp-badge-type\">${escapeHtml(getTypeLabel(item.type))}</span>\n            <span class=\"mp-checkmark\">✓</span>\n          </div>\n\n          <div class=\"mp-meta\">\n            <div class=\"mp-source\">${escapeHtml(item.source)}・${escapeHtml(formatDate(item.createdAt))}</div>\n            <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n            <div class=\"mp-people\">\n              <span class=\"mp-person-chip\">${escapeHtml(item.ext || item.type)}</span>\n              <span class=\"mp-person-chip\">${escapeHtml(item.mime || \'file\')}</span>\n            </div>\n\n            <button class=\"mp-detail-link\" type=\"button\">底層資料</button>\n\n            <div class=\"mp-detail-box\">\n              <div class=\"mp-detail-title\">Media 底層資料</div>\n              <div class=\"mp-detail-row\">Media ID：${escapeHtml(item.id)}</div>\n              <div class=\"mp-detail-row\">檔案名稱：${escapeHtml(item.name)}</div>\n              <div class=\"mp-detail-row\">標題：${escapeHtml(item.title)}</div>\n              <div class=\"mp-detail-row\">類型：${escapeHtml(item.type)}</div>\n              <div class=\"mp-detail-row\">副檔名：${escapeHtml(item.ext)}</div>\n              <div class=\"mp-detail-row\">MIME：${escapeHtml(item.mime)}</div>\n              <div class=\"mp-detail-row\">大小：${escapeHtml(formatBytes(item.size))}</div>\n              <div class=\"mp-detail-row\">尺寸：${escapeHtml(item.width && item.height ? item.width + \' × \' + item.height : \'-\')}</div>\n              <div class=\"mp-detail-row\">上傳日期：${escapeHtml(formatDate(item.createdAt))}</div>\n              <div class=\"mp-detail-row\">說明：${escapeHtml(item.description || \'-\')}</div>\n              <div class=\"mp-detail-row\">URL：${escapeHtml(item.url || \'-\')}</div>\n            </div>\n          </div>\n        </article>\n      `;\n    }).join(\'\');\n\n    bindCardEvents();\n    syncTopCheckboxes();\n  }\n\n  function bindCardEvents(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n    cards.forEach(card => {\n      card.addEventListener(\'click\', function(e){\n        if (e.target.closest(\'.mp-detail-link\')) return;\n        if (e.target.closest(\'.mp-detail-box\')) return;\n\n        card.classList.toggle(\'is-selected\');\n        syncTopCheckboxes();\n      });\n\n      const detailBtn = card.querySelector(\'.mp-detail-link\');\n      if (detailBtn) {\n        detailBtn.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          card.classList.toggle(\'show-detail\');\n        });\n      }\n    });\n  }\n\n  function applyFilters(){\n    const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n\n    let items = allItems.filter(item => {\n      let visible = true;\n\n      const text = [\n        item.name,\n        item.title,\n        item.source,\n        item.description,\n        item.type,\n        item.mime,\n        item.ext,\n        item.url\n      ].join(\' \').toLowerCase();\n\n      if (keyword && !text.includes(keyword)) visible = false;\n      if (onlyPhotos && onlyPhotos.checked && item.type !== \'photo\') visible = false;\n      if (onlyVideos && onlyVideos.checked && item.type !== \'video\') visible = false;\n\n      return visible;\n    });\n\n    const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n    items.sort(function(a, b){\n      if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n      if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n      if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n      return String(b.createdAt).localeCompare(String(a.createdAt));\n    });\n\n    renderItems(items);\n  }\n\n  function syncTopCheckboxes(){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    const selectable = cards.filter(card => card.style.display !== \'none\');\n    const photoCards = cards.filter(card => card.dataset.type === \'photo\' && card.style.display !== \'none\');\n    const videoCards = cards.filter(card => card.dataset.type === \'video\' && card.style.display !== \'none\');\n\n    if (selectAll) {\n      selectAll.checked = selectable.length > 0 && selectable.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectPhotos) {\n      selectPhotos.checked = photoCards.length > 0 && photoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n\n    if (selectVideos) {\n      selectVideos.checked = videoCards.length > 0 && videoCards.every(card => card.classList.contains(\'is-selected\'));\n    }\n  }\n\n  function setAllSelected(selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => card.classList.toggle(\'is-selected\', selected));\n    syncTopCheckboxes();\n  }\n\n  function setSelectedByType(type, selected){\n    const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n    cards.forEach(card => {\n      if (card.dataset.type === type) {\n        card.classList.toggle(\'is-selected\', selected);\n      }\n    });\n    syncTopCheckboxes();\n  }\n\n  if (filterBtn && filterPop) {\n    filterBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n      e.stopPropagation();\n      filterPop.classList.toggle(\'show\');\n    });\n  }\n\n  document.addEventListener(\'click\', function(e){\n    if (!root.contains(e.target)) return;\n    if (!filterPop) return;\n\n    if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n      filterPop.classList.remove(\'show\');\n    }\n  });\n\n  if (selectAll) {\n    selectAll.addEventListener(\'change\', function(){\n      setAllSelected(selectAll.checked);\n    });\n  }\n\n  if (selectPhotos) {\n    selectPhotos.addEventListener(\'change\', function(){\n      setSelectedByType(\'photo\', selectPhotos.checked);\n    });\n  }\n\n  if (selectVideos) {\n    selectVideos.addEventListener(\'change\', function(){\n      setSelectedByType(\'video\', selectVideos.checked);\n    });\n  }\n\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', applyFilters);\n  }\n\n  if (onlyPhotos) {\n    onlyPhotos.addEventListener(\'change\', function(){\n      if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n      applyFilters();\n    });\n  }\n\n  if (onlyVideos) {\n    onlyVideos.addEventListener(\'change\', function(){\n      if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n      applyFilters();\n    });\n  }\n\n  Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n    radio.addEventListener(\'change\', applyFilters);\n  });\n\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function(e){\n      e.preventDefault();\n\n      if (searchInput) searchInput.value = \'\';\n      if (onlyPhotos) onlyPhotos.checked = false;\n      if (onlyVideos) onlyVideos.checked = false;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(card => {\n        card.classList.remove(\'is-selected\');\n        card.classList.remove(\'show-detail\');\n      });\n\n      loadMediaItems();\n    });\n  }\n\n  if (addToPeopleBtn) {\n    addToPeopleBtn.addEventListener(\'click\', function(){\n      const selectedCards = Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n\n      if (!selectedCards.length) {\n        alert(\'請先選擇要加入識別集的檔案\');\n        return;\n      }\n\n      alert(\'已加入識別集：\' + selectedCards.length + \' 筆\');\n    });\n  }\n\n  loadMediaItems();\n})();\n</script>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-11 07:29:49','2026-05-11 07:29:49','',1356,'https://wp.momentry.ddns.net/?p=1508',0,'revision','',0),
(1509,6,'2026-05-11 07:57:07','2026-05-11 07:57:07','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectAll\"> 全選</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectVideos\"> 全選影片</label>\n        <label class=\"mp-check\"><input type=\"checkbox\" id=\"mpSelectPhotos\"> 全選照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / 圖片\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-11 07:57:07','2026-05-11 07:57:07','',1356,'https://wp.momentry.ddns.net/?p=1509',0,'revision','',0),
(1511,6,'2026-05-11 08:35:36','2026-05-11 08:35:36','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字档案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / 圖片\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-11 08:35:36','2026-05-11 08:35:36','',1356,'https://wp.momentry.ddns.net/?p=1511',0,'revision','',0),
(1512,6,'2026-05-11 08:37:45','2026-05-11 08:37:45','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / 圖片\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示照片</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-11 08:37:45','2026-05-11 08:37:45','',1356,'https://wp.momentry.ddns.net/?p=1512',0,'revision','',0),
(1513,6,'2026-05-11 08:40:28','2026-05-11 08:40:28','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">加入識別集</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示文字檔案</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-11 08:40:28','2026-05-11 08:40:28','',1356,'https://wp.momentry.ddns.net/?p=1513',0,'revision','',0),
(1515,6,'2026-05-13 06:54:27','2026-05-13 06:54:27','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示文字檔案</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-13 06:54:27','2026-05-13 06:54:27','',1356,'https://wp.momentry.ddns.net/?p=1515',0,'revision','',0),
(1516,6,'2026-05-14 08:53:20','2026-05-14 08:53:20','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示文字檔案</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-14 08:53:20','2026-05-14 08:53:20','',1356,'https://wp.momentry.ddns.net/?p=1516',0,'revision','',0),
(1517,6,'2026-05-14 09:19:33','2026-05-14 09:19:33','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n      <div class=\"mp-filter-title\">排序方式</div>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked> 依時間・由近到遠</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_asc\"> 依檔名・由 A 到 Z</label>\n      <label class=\"mp-radio-row\"><input type=\"radio\" name=\"mp-sort\" value=\"name_desc\"> 依檔名・由 Z 到 A</label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyPhotos\"> 僅顯示文字檔案</label>\n      <label class=\"mp-check-row\"><input type=\"checkbox\" id=\"mpOnlyVideos\"> 僅顯示影片</label>\n    </div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-14 09:19:33','2026-05-14 09:19:33','',1356,'https://wp.momentry.ddns.net/?p=1517',0,'revision','',0),
(1518,6,'2026-05-14 11:38:54','2026-05-14 11:38:54','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-14 11:38:54','2026-05-14 11:38:54','',1356,'https://wp.momentry.ddns.net/?p=1518',0,'revision','',0),
(1519,1,'2026-05-14 14:00:50','2026-05-14 14:00:50','<!-- wp:shortcode -->\n[momentry_api_dashboard_v4]\n<!-- /wp:shortcode -->','Test API 05/17-SC','','trash','closed','closed','','1519-2__trashed','','','2026-05-21 06:12:39','2026-05-21 06:12:39','',0,'https://wp.momentry.ddns.net/?page_id=1519',0,'page','',0),
(1520,1,'2026-05-14 14:00:50','2026-05-14 14:00:50','<!-- wp:shortcode -->\n[momentry_api_dashboard_v2]\n<!-- /wp:shortcode -->','','','inherit','closed','closed','','1519-revision-v1','','','2026-05-14 14:00:50','2026-05-14 14:00:50','',1519,'https://wp.momentry.ddns.net/?p=1520',0,'revision','',0),
(1522,4,'2026-05-15 07:21:39','2026-05-15 07:21:39','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <!-- 星星 toggle -->\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n          <!-- 新增標籤 -->\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;\">\n          <!-- 星星（edit mode 也保留）-->\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input\" style=\"font-size:15px;font-weight:600;\" id=\"msPplEditName\" placeholder=\"加入人名\">\n          <div id=\"msPplAliasWrap\" style=\"display:flex;flex-wrap:wrap;gap:6px;align-items:center;\"></div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">演員</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n        </div>\n        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n          <span class=\"ms-ppl-meta-label\" style=\"min-width:32px;\">角色</span>\n          <input class=\"ms-ppl-edit-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n        </div>\n        <textarea class=\"ms-ppl-edit-textarea\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n        <div style=\"display:flex;gap:8px;margin-top:12px;\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 07:21:39','2026-05-15 07:21:39','',1359,'https://wp.momentry.ddns.net/?p=1522',0,'revision','',0),
(1523,4,'2026-05-15 08:41:39','2026-05-15 08:41:39','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <!-- 星星 toggle -->\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-detail-name\" id=\"msPplDetailName\">—</div>\n          <!-- 新增標籤 -->\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">演員</span><span id=\"msPplDetailActor\">—</span></div>\n        <div class=\"ms-ppl-detail-meta\"><span class=\"ms-ppl-meta-label\">角色</span><span id=\"msPplDetailRole\">—</span></div>\n        <div class=\"ms-ppl-detail-notes\" id=\"msPplDetailNotes\">—</div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：演員 / 角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">演員</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px; /* 對齊欄位輸入框 */\n}\n\n  border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 7px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  outline: none; background: #fff;\n  transition: border-color .15s; min-width: 160px;\n}\n.ms-ppl-edit-input:focus { border-color: #202124; }\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #d1d5db; border-radius: 8px;\n  padding: 8px 11px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124;\n  outline: none; resize: vertical; min-height: 60px;\n  background: #fff; transition: border-color .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #202124; }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 08:41:39','2026-05-15 08:41:39','',1359,'https://wp.momentry.ddns.net/?p=1523',0,'revision','',0),
(1524,4,'2026-05-15 08:48:22','2026-05-15 08:48:22','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 演員 / 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">演員</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailActor\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：演員 / 角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">演員</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 */\n.ms-ppl-view-box {\n  background: #fff;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  min-height: 38px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  box-sizing: border-box;\n}\n.ms-ppl-view-name-box {\n  font-size: 16px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 60px;\n  align-items: flex-start;\n  color: #5f6368;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 08:48:22','2026-05-15 08:48:22','',1359,'https://wp.momentry.ddns.net/?p=1524',0,'revision','',0),
(1525,4,'2026-05-15 08:55:10','2026-05-15 08:55:10','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 演員 / 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">演員</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailActor\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：演員 / 角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">演員</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 08:55:10','2026-05-15 08:55:10','',1359,'https://wp.momentry.ddns.net/?p=1525',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1526,4,'2026-05-15 08:58:12','2026-05-15 08:58:12','<!-- wp:html -->\n<?php\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  // 只在 lt-people-people 頁面執行\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  var AUDREY_IMG_URL = \'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Audrey_Hepburn_1956.jpg/440px-Audrey_Hepburn_1956.jpg\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n     TODO: 接 API 時將 MOCK_PEOPLE 替換為\n     fetch(\'/wp-json/ms/v1/people\', { headers: { \'X-WP-Nonce\': msConfig.nonce } })\n     .then(r => r.json()).then(data => { PEOPLE = data; renderAll(); })\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'奧黛麗赫本\',\n      isAudrey: true,\n      thumb: null,\n      isNew: true,\n      isStarred: false,\n      aliases: [\'Reggie\', \'オードリー・ヘプバーン\'],\n      actor: \'Audrey Hepburn\',\n      role: \'安娜公主、Regina Lampert\',\n      notes: \'演過窈窕淑女、羅馬假期\',\n      addedAt: new Date(\'2026-01-01\'),\n      lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: true, thumb: null },\n        { id: \'fm-a2\', isAudrey: true, thumb: null },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200\' }\n      ],\n      media: [\n        { id: \'m1\', title: \'Chunk sentence_0093\', subtitle: \'搜尋結果\', type: \'video\', thumb: AUDREY_IMG_URL, duration: 82 },\n        { id: \'m2\', title: \'Chunk sentence_0665\', subtitle: \'搜尋結果\', type: \'video\', thumb: AUDREY_IMG_URL, duration: 82 },\n        { id: \'m3\', title: \'Chunk sentence_0093\', subtitle: \'搜尋結果\', type: \'video\', thumb: AUDREY_IMG_URL, duration: 82 },\n        { id: \'m4\', title: \'Chunk sentence_0665\', subtitle: \'搜尋結果\', type: \'video\', thumb: AUDREY_IMG_URL, duration: 82 }\n      ]\n    },\n    {\n      id: \'p002\',\n      name: \'歐導\',\n      isAudrey: false,\n      thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400\',\n      isNew: true,\n      isStarred: false,\n      aliases: [],\n      actor: \'歐陽導演\',\n      role: \'導演\',\n      notes: \'\',\n      addedAt: new Date(\'2026-01-02\'),\n      lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=200\' }\n      ],\n      media: [\n        { id: \'m5\', title: \'Scene_0044\', subtitle: \'搜尋結果\', type: \'video\', thumb: \'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400\', duration: 60 }\n      ]\n    },\n    {\n      id: \'p003\',\n      name: \'\',\n      isAudrey: false,\n      thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=400\',\n      isNew: false,\n      isStarred: false,\n      aliases: [],\n      actor: \'\',\n      role: \'\',\n      notes: \'\',\n      addedAt: new Date(\'2026-01-03\'),\n      lastViewed: new Date(\'2026-05-01\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=200\' }\n      ],\n      media: []\n    },\n    {\n      id: \'p004\',\n      name: \'\',\n      isAudrey: false,\n      thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=400\',\n      isNew: false,\n      isStarred: false,\n      aliases: [],\n      actor: \'\',\n      role: \'\',\n      notes: \'\',\n      addedAt: new Date(\'2026-01-04\'),\n      lastViewed: new Date(\'2026-04-20\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=200\' }\n      ],\n      media: []\n    },\n    {\n      id: \'p005\',\n      name: \'\',\n      isAudrey: false,\n      thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400\',\n      isNew: false,\n      isStarred: false,\n      aliases: [],\n      actor: \'\',\n      role: \'\',\n      notes: \'\',\n      addedAt: new Date(\'2026-01-05\'),\n      lastViewed: new Date(\'2026-04-15\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200\' }\n      ],\n      media: []\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,         // 目前顯示重要人物 or 所有人物\n    searchQuery: \'\',            // 搜尋關鍵字\n    sortMode: \'time\',           // \'time\' | \'recent\'\n    currentPerson: null,        // 目前詳情頁的 person 物件\n    editMode: false,            // 詳情頁是否在 edit mode\n    currentAliases: [],         // edit mode 暫存 aliases\n    ctxFmId: null,              // 右鍵選單的 face member id\n    mergeSource: null,          // 觸發合併的來源 (person 或 face member)\n    mergeTarget: null,          // 使用者選擇要合併的目標 person id\n    mergeFromDetail: false      // 合併是從詳情頁的 + 觸發的\n  };\n\n  /* ══════════════════════════════════════\n     Helper: make img element\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () {\n      this.parentNode.innerHTML = fallback || SILHOUETTE_SVG;\n    };\n    return img;\n  }\n\n  function makeAvatar(person, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = person.isAudrey ? AUDREY_IMG_URL : (person.thumb || null);\n    if (src) {\n      wrap.appendChild(makeImg(src));\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  function makeFmAvatar(fm, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;\';\n    var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n    if (src) { wrap.appendChild(makeImg(src)); } else { wrap.innerHTML = SILHOUETTE_SVG; }\n    return wrap;\n  }\n\n  /* ══════════════════════════════════════\n     View switching\n  ══════════════════════════════════════ */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     View A — People Grid\n  ══════════════════════════════════════ */\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n\n    // 重要人物 filter\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n\n    // 搜尋 filter\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.actor || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n\n    // 排序\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n\n    return list;\n  }\n\n  function renderGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n      card.dataset.personId = person.id;\n\n      // New badge\n      if (person.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      // Image wrap\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      var src = person.isAudrey ? AUDREY_IMG_URL : (person.thumb || null);\n      if (src) {\n        imgWrap.appendChild(makeImg(src));\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      // Star badge\n      var starBadge = document.createElement(\'div\');\n      starBadge.className = \'ms-ppl-card-star\';\n      starBadge.textContent = \'★\';\n      imgWrap.appendChild(starBadge);\n\n      // Hover tooltip\n      var tooltip = document.createElement(\'div\');\n      tooltip.className = \'ms-ppl-card-tooltip\';\n\n      var btnAlready = document.createElement(\'button\');\n      btnAlready.className = \'ms-ppl-card-tooltip-item\';\n      btnAlready.textContent = \'已有此人物\';\n      btnAlready.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        openMergeModal(person, false);\n      });\n\n      var btnStar = document.createElement(\'button\');\n      btnStar.className = \'ms-ppl-card-tooltip-item\';\n      btnStar.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n      btnStar.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        toggleStar(person);\n        renderGrid();\n      });\n\n      tooltip.appendChild(btnAlready);\n      tooltip.appendChild(btnStar);\n      imgWrap.appendChild(tooltip);\n\n      card.appendChild(imgWrap);\n\n      // Name\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = person.name || \'（未命名）\';\n      card.appendChild(nameEl);\n\n      // Click → detail\n      card.addEventListener(\'click\', function () {\n        openDetail(person);\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Toggle starred ── */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    // 如果在詳情頁也要同步更新星星按鈕\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ── Star toggle (查看重要人物) ── */\n  var starToggleBtn = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        sectionTitle.textContent = \'所有人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     View B — Detail\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n\n    // 更新 lastViewed\n    person.lastViewed = new Date();\n\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    // Name\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    // Stars\n    syncDetailStarBtns(person);\n\n    // Aliases\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Meta\n    setText(\'msPplDetailActor\', person.actor);\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.isAudrey ? AUDREY_IMG_URL : (person.thumb || null);\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    // Face strip\n    renderFaceStrip(person);\n\n    // Media\n    renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    // Edit mode off\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.isAudrey ? AUDREY_IMG_URL : (fm.thumb || null);\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      // Remove btn（edit mode 時顯示）\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      // 右鍵 context menu\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    // edit mode class\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    // 同步右上角按鈕文字\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n\n      if (state.editMode) {\n        // 已在編輯中 → 取消，回到 view mode\n        renderDetailView(state.currentPerson);\n        return;\n      }\n\n      // 進入 edit mode\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditActor\', p.actor);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.actor  = getVal(\'msPplEditActor\');\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) {\n          state.currentAliases.push(val);\n          renderAliases();\n        }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) {\n        state.currentAliases.push(val);\n        renderAliases();\n      }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star buttons (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 (view mode 快速加：直接進入 edit mode 並 focus 別名輸入) ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      // 進入 edit mode\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditActor\', p.actor);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      // 自動觸發別名輸入\n      setTimeout(function () {\n        var addBtn = document.getElementById(\'msPplAddAlias\');\n        if (addBtn) addBtn.click();\n      }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip > arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu (right-click on face strip)\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        state.ctxFmId = null;\n        showModal(\'msPplRemoveModal\');\n      }\n      hideCtxMenu();\n    });\n  }\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          // 從目前人物移除\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          // 建立新人物\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            actor: \'\', role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          // 進入 edit mode 讓使用者填名字\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n     觸發點：\n     1. 人物卡片 tooltip「已有此人物」→ openMergeModal(person, false)\n     2. 詳情頁 face strip「+」按鈕   → openMergeModal(person, true)\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource = sourcePerson;\n    state.mergeTarget = null;\n    state.mergeFromDetail = fromDetail;\n\n    // 顯示觸發人臉\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.isAudrey ? AUDREY_IMG_URL : (sourcePerson.thumb || null);\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    // 清空搜尋\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    // 顯示所有其他人物（排除自己）\n    var list = MOCK_PEOPLE.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n             (p.actor || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.isAudrey ? AUDREY_IMG_URL : (person.thumb || null);\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（未命名）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        // 更新選中樣式\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  // Merge modal 搜尋\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () {\n      renderMergeGrid(this.value.trim());\n    });\n  }\n\n  // Merge modal 取消\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  // Merge modal 完成 → 確認合併 modal\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  // 確認合併\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        var target = MOCK_PEOPLE.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          // 合併：把 source 的 face_members 和 media 加到 target\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          // 從清單移除 source\n          var idx = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idx !== -1) MOCK_PEOPLE.splice(idx, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      // 返回 merge modal\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  // Face strip + 按鈕\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        state.currentPerson.face_members = state.currentPerson.face_members.filter(function (fm) {\n          return fm.id !== state.ctxFmId;\n        });\n        state.ctxFmId = null;\n        renderFaceStrip(state.currentPerson);\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (grid) {\n      renderGrid();\n    }\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n?>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 08:58:12','2026-05-15 08:58:12','',1359,'https://wp.momentry.ddns.net/?p=1526',0,'revision','',0),
(1527,4,'2026-05-15 08:58:46','2026-05-15 08:58:46','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 演員 / 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">演員</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailActor\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：演員 / 角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">演員</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditActor\" placeholder=\"演員名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 08:58:46','2026-05-15 08:58:46','',1359,'https://wp.momentry.ddns.net/?p=1527',0,'revision','',0),
(1528,4,'2026-05-15 09:08:47','2026-05-15 09:08:47','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 09:08:47','2026-05-15 09:08:47','',1359,'https://wp.momentry.ddns.net/?p=1528',0,'revision','',0),
(1529,4,'2026-05-15 10:26:25','2026-05-15 10:26:25','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 4px; }\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n  overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 10:26:25','2026-05-15 10:26:25','',1359,'https://wp.momentry.ddns.net/?p=1529',0,'revision','',0),
(1530,4,'2026-05-15 10:28:16','2026-05-15 10:28:16','<!-- wp:html -->\n<?php\n// 防止 WordPress filter 破壞 JS 內容\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  // 只在 lt-people-people 頁面執行\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n     TODO: 接 API 時將 MOCK_PEOPLE 替換為\n     fetch(\'/wp-json/ms/v1/people\', { headers: { \'X-WP-Nonce\': msConfig.nonce } })\n     .then(r => r.json()).then(data => { PEOPLE = data; renderAll(); })\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true,\n      isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'),\n      lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [\n        { id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }\n      ]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true,\n      isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'),\n      lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [\n        { id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }\n      ]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false,\n      isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'),\n      lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [\n        { id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }\n      ]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false,\n      isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'),\n      lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [\n        { id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }\n      ]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false,\n      isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'),\n      lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [\n        { id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }\n      ]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,         // 目前顯示重要人物 or 所有人物\n    searchQuery: \'\',            // 搜尋關鍵字\n    sortMode: \'time\',           // \'time\' | \'recent\'\n    currentPerson: null,        // 目前詳情頁的 person 物件\n    editMode: false,            // 詳情頁是否在 edit mode\n    currentAliases: [],         // edit mode 暫存 aliases\n    ctxFmId: null,              // 右鍵選單的 face member id\n    mergeSource: null,          // 觸發合併的來源 (person 或 face member)\n    mergeTarget: null,          // 使用者選擇要合併的目標 person id\n    mergeFromDetail: false      // 合併是從詳情頁的 + 觸發的\n  };\n\n  /* ══════════════════════════════════════\n     Helper: make img element\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () {\n      this.parentNode.innerHTML = fallback || SILHOUETTE_SVG;\n    };\n    return img;\n  }\n\n  function makeAvatar(person, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;flex-shrink:0;\';\n    var src = person.thumb || null;\n    if (src) {\n      wrap.appendChild(makeImg(src));\n    } else {\n      wrap.innerHTML = SILHOUETTE_SVG;\n    }\n    return wrap;\n  }\n\n  function makeFmAvatar(fm, size, radius) {\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'width:\' + size + \'px;height:\' + size + \'px;border-radius:\' + radius + \';overflow:hidden;background:#e8eaed;\';\n    var src = fm.thumb || null;\n    if (src) { wrap.appendChild(makeImg(src)); } else { wrap.innerHTML = SILHOUETTE_SVG; }\n    return wrap;\n  }\n\n  /* ══════════════════════════════════════\n     View switching\n  ══════════════════════════════════════ */\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     View A — People Grid\n  ══════════════════════════════════════ */\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n\n    // 重要人物 filter\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n\n    // 搜尋 filter\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.actor || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n\n    // 排序\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n\n    return list;\n  }\n\n  function renderGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n      card.dataset.personId = person.id;\n\n      // New badge\n      if (person.isNew) {\n        var badge = document.createElement(\'div\');\n        badge.className = \'ms-ppl-face-new\';\n        badge.textContent = \'New\';\n        card.appendChild(badge);\n      }\n\n      // Image wrap\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n      var src = person.thumb || null;\n      if (src) {\n        imgWrap.appendChild(makeImg(src));\n      } else {\n        imgWrap.innerHTML = SILHOUETTE_SVG;\n      }\n\n      // Star badge\n      var starBadge = document.createElement(\'div\');\n      starBadge.className = \'ms-ppl-card-star\';\n      starBadge.textContent = \'★\';\n      imgWrap.appendChild(starBadge);\n\n      // Hover tooltip\n      var tooltip = document.createElement(\'div\');\n      tooltip.className = \'ms-ppl-card-tooltip\';\n\n      var btnAlready = document.createElement(\'button\');\n      btnAlready.className = \'ms-ppl-card-tooltip-item\';\n      btnAlready.textContent = \'已有此人物\';\n      btnAlready.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        openMergeModal(person, false);\n      });\n\n      var btnStar = document.createElement(\'button\');\n      btnStar.className = \'ms-ppl-card-tooltip-item\';\n      btnStar.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n      btnStar.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        toggleStar(person);\n        renderGrid();\n      });\n\n      tooltip.appendChild(btnAlready);\n      tooltip.appendChild(btnStar);\n      imgWrap.appendChild(tooltip);\n\n      card.appendChild(imgWrap);\n\n      // Name\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-ppl-face-name\';\n      nameEl.textContent = person.name || \'（未命名）\';\n      card.appendChild(nameEl);\n\n      // Click → detail\n      card.addEventListener(\'click\', function () {\n        openDetail(person);\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  /* ── Toggle starred ── */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    // 如果在詳情頁也要同步更新星星按鈕\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ── Star toggle (查看重要人物) ── */\n  var starToggleBtn = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'所有人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort panel ── */\n  var sortBtn = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) {\n      e.stopPropagation();\n      sortPanel.classList.toggle(\'show\');\n    });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) {\n        sortPanel.classList.remove(\'show\');\n      }\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     View B — Detail\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n\n    // 更新 lastViewed\n    person.lastViewed = new Date();\n\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    // Name\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    // Stars\n    syncDetailStarBtns(person);\n\n    // Aliases\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    // Meta\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    // Avatar\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    // Face strip\n    renderFaceStrip(person);\n\n    // Media\n    renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    // Edit mode off\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    // 第一張已作為 avatar 顯示，strip 從第二張開始\n    var stripMembers = members.slice(1);\n    stripMembers.forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      // Remove btn（edit mode 時顯示）\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      // 右鍵 context menu\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    // edit mode class\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    // 同步右上角按鈕文字\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n\n      if (state.editMode) {\n        // 已在編輯中 → 取消，回到 view mode\n        renderDetailView(state.currentPerson);\n        return;\n      }\n\n      // 進入 edit mode\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) {\n          state.currentAliases.push(val);\n          renderAliases();\n        }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) {\n        state.currentAliases.push(val);\n        renderAliases();\n      }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star buttons (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 (view mode 快速加：直接進入 edit mode 並 focus 別名輸入) ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      // 進入 edit mode\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditActor\', p.actor);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      // 自動觸發別名輸入\n      setTimeout(function () {\n        var addBtn = document.getElementById(\'msPplAddAlias\');\n        if (addBtn) addBtn.click();\n      }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip > arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu (right-click on face strip)\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      // 不清除 ctxFmId，留給 removeConfirm 使用\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          // 從目前人物移除\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          // 建立新人物\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            actor: \'\', role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          // 進入 edit mode 讓使用者填名字\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n     觸發點：\n     1. 人物卡片 tooltip「已有此人物」→ openMergeModal(person, false)\n     2. 詳情頁 face strip「+」按鈕   → openMergeModal(person, true)\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource = sourcePerson;\n    state.mergeTarget = null;\n    state.mergeFromDetail = fromDetail;\n\n    // 顯示觸發人臉\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    // 清空搜尋\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    // 顯示所有其他人物（排除自己）\n    var list = MOCK_PEOPLE.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n             (p.actor || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（未命名）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        // 更新選中樣式\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  // Merge modal 搜尋\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () {\n      renderMergeGrid(this.value.trim());\n    });\n  }\n\n  // Merge modal 取消\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  // Merge modal 完成 → 確認合併 modal\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  // 確認合併\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        var target = MOCK_PEOPLE.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          // 合併：把 source 的 face_members 和 media 加到 target\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          // 從清單移除 source\n          var idx = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idx !== -1) MOCK_PEOPLE.splice(idx, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      // 返回 merge modal\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  // Face strip + 按鈕\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        state.currentPerson.face_members = state.currentPerson.face_members.filter(function (fm) {\n          return fm.id !== state.ctxFmId;\n        });\n        // 同步更新 thumb 為新的第一張\n        if (state.currentPerson.face_members.length > 0) {\n          state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n        } else {\n          state.currentPerson.thumb = null;\n        }\n        state.ctxFmId = null;\n        // 重新渲染整個詳情頁（avatar + strip 一起更新）\n        renderDetailView(state.currentPerson);\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (grid) {\n      renderGrid();\n    }\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n?>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 10:28:16','2026-05-15 10:28:16','',1359,'https://wp.momentry.ddns.net/?p=1530',0,'revision','',0),
(1531,4,'2026-05-15 10:28:28','2026-05-15 10:28:28','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 4px; }\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n  overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 10:28:28','2026-05-15 10:28:28','',1359,'https://wp.momentry.ddns.net/?p=1531',0,'revision','',0),
(1532,4,'2026-05-15 10:29:54','2026-05-15 10:29:54','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n/* 防止 .ms-main 的 border-radius 裁切按鈕左上角 */\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n  overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: -5px; left: -5px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 10:29:54','2026-05-15 10:29:54','',1359,'https://wp.momentry.ddns.net/?p=1532',0,'revision','',0),
(1533,4,'2026-05-15 10:36:26','2026-05-15 10:36:26','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n/* 防止 .ms-main 的 border-radius 裁切按鈕左上角 */\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n  overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* Hover tooltip on card */\n.ms-ppl-card-tooltip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + 6px); left: 50%;\n  transform: translateX(-50%);\n  background: #fff;\n  border: 1px solid #e8eaed;\n  border-radius: 10px;\n  box-shadow: 0 4px 16px rgba(0,0,0,.12);\n  padding: 6px;\n  z-index: 100;\n  min-width: 110px;\n  white-space: nowrap;\n}\n.ms-ppl-face-img-wrap:hover .ms-ppl-card-tooltip { display: block; }\n.ms-ppl-card-tooltip-item {\n  display: block; width: 100%; text-align: left;\n  padding: 7px 12px; border: none; background: transparent;\n  border-radius: 7px; cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124;\n  transition: background .1s; white-space: nowrap;\n}\n.ms-ppl-card-tooltip-item:hover { background: #f3f4f6; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 130px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-15 10:36:26','2026-05-15 10:36:26','',1359,'https://wp.momentry.ddns.net/?p=1533',0,'revision','',0),
(1534,4,'2026-05-16 14:43:01','2026-05-16 14:43:01','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled>\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input\n          id=\"msInput\"\n          class=\"ms-input\"\n          type=\"text\"\n          inputmode=\"search\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          placeholder=\"搜尋照片或影片關鍵字…\"\n          aria-label=\"Search input\"\n        />\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'https://wp.momentry.ddns.net/ww-4-7/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n  var currentMode  = \'keyword\';\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n    currentMode = value;\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','LT-Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-16 14:43:01','2026-05-16 14:43:01','',341,'https://m5wp.momentry.ddns.net/?p=1534',0,'revision','',0),
(1535,1,'2026-05-17 03:57:28','2026-05-17 03:57:28','<!-- wp:shortcode -->\n[momentry_api_dashboard_v3]\n<!-- /wp:shortcode -->','','','inherit','closed','closed','','1519-revision-v1','','','2026-05-17 03:57:28','2026-05-17 03:57:28','',1519,'https://m5wp.momentry.ddns.net/?p=1535',0,'revision','',0),
(1536,1,'2026-05-17 04:01:41','2026-05-17 04:01:41','<!-- wp:shortcode -->\n[momentry_api_dashboard_v4]\n<!-- /wp:shortcode -->','','','inherit','closed','closed','','1519-revision-v1','','','2026-05-17 04:01:41','2026-05-17 04:01:41','',1519,'https://m5wp.momentry.ddns.net/?p=1536',0,'revision','',0),
(1537,1,'2026-05-17 04:30:39','2026-05-17 04:30:39','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n</style>\n\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Progress </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Progress','','publish','closed','closed','','progress','','','2026-05-25 11:26:44','2026-05-25 11:26:44','',0,'https://m5wp.momentry.ddns.net/?page_id=1537',0,'page','',0),
(1538,1,'2026-05-17 04:30:35','2026-05-17 04:30:35','','Progress','','inherit','closed','closed','','1537-revision-v1','','','2026-05-17 04:30:35','2026-05-17 04:30:35','',1537,'https://m5wp.momentry.ddns.net/?p=1538',0,'revision','',0),
(1539,1,'2026-05-17 04:31:28','2026-05-17 04:31:28','<!-- wp:paragraph -->\n<p>Place Holder...</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中...</p>\n<!-- /wp:paragraph -->','Progress','','inherit','closed','closed','','1537-revision-v1','','','2026-05-17 04:31:28','2026-05-17 04:31:28','',1537,'https://m5wp.momentry.ddns.net/?p=1539',0,'revision','',0),
(1540,1,'2026-05-17 04:32:35','2026-05-17 04:32:35','','Measure','','publish','open','open','','measure','','','2026-05-17 04:32:35','2026-05-17 04:32:35','',0,'https://m5wp.momentry.ddns.net/?p=1540',0,'post','',0),
(1541,1,'2026-05-17 04:31:57','2026-05-17 04:31:57','','Measure','','inherit','closed','closed','','1540-revision-v1','','','2026-05-17 04:31:57','2026-05-17 04:31:57','',1540,'https://m5wp.momentry.ddns.net/?p=1541',0,'revision','',0),
(1542,1,'2026-05-17 04:33:19','2026-05-17 04:33:19','','Measure','','trash','open','open','','__trashed','','','2026-05-17 04:33:19','2026-05-17 04:33:19','',0,'https://m5wp.momentry.ddns.net/?p=1542',0,'post','',0),
(1543,1,'2026-05-17 04:33:14','2026-05-17 04:33:14','','Measure','','inherit','closed','closed','','1542-revision-v1','','','2026-05-17 04:33:14','2026-05-17 04:33:14','',1542,'https://m5wp.momentry.ddns.net/?p=1543',0,'revision','',0),
(1545,1,'2026-05-17 04:33:51','2026-05-17 04:33:51','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Measure','','trash','closed','closed','','measure__trashed','','','2026-05-17 06:11:57','2026-05-17 06:11:57','',0,'https://m5wp.momentry.ddns.net/?page_id=1545',0,'page','',0),
(1546,1,'2026-05-17 04:33:43','2026-05-17 04:33:43','','Measure','','inherit','closed','closed','','1545-revision-v1','','','2026-05-17 04:33:43','2026-05-17 04:33:43','',1545,'https://m5wp.momentry.ddns.net/?p=1546',0,'revision','',0),
(1547,1,'2026-05-17 04:34:19','2026-05-17 04:34:19','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Examination','','trash','closed','closed','','examination__trashed','','','2026-05-17 05:36:18','2026-05-17 05:36:18','',0,'https://m5wp.momentry.ddns.net/?page_id=1547',0,'page','',0),
(1548,1,'2026-05-17 04:34:12','2026-05-17 04:34:12','','Examination','','inherit','closed','closed','','1547-revision-v1','','','2026-05-17 04:34:12','2026-05-17 04:34:12','',1547,'https://m5wp.momentry.ddns.net/?p=1548',0,'revision','',0),
(1549,1,'2026-05-17 04:36:18','2026-05-17 04:36:18','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Measure','','inherit','closed','closed','','1545-revision-v1','','','2026-05-17 04:36:18','2026-05-17 04:36:18','',1545,'https://m5wp.momentry.ddns.net/?p=1549',0,'revision','',0),
(1550,1,'2026-05-17 04:36:30','2026-05-17 04:36:30','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Examination','','inherit','closed','closed','','1547-revision-v1','','','2026-05-17 04:36:30','2026-05-17 04:36:30','',1547,'https://m5wp.momentry.ddns.net/?p=1550',0,'revision','',0),
(1551,1,'2026-05-17 04:40:32','2026-05-17 04:40:32','<!-- wp:shortcode -->\n[momentry_api_dashboard_v4]\n<!-- /wp:shortcode -->','Test API 05/17-SC','','inherit','closed','closed','','1519-revision-v1','','','2026-05-17 04:40:32','2026-05-17 04:40:32','',1519,'https://m5wp.momentry.ddns.net/?p=1551',0,'revision','',0),
(1552,1,'2026-05-17 05:01:36','2026-05-17 05:01:36','<!-- wp:shortcode -->\n[momentry_api_dashboard_v5]\n<!-- /wp:shortcode -->','API_Test_SC','','inherit','closed','closed','','1505-revision-v1','','','2026-05-17 05:01:36','2026-05-17 05:01:36','',1505,'https://m5wp.momentry.ddns.net/?p=1552',0,'revision','',0),
(1553,1,'2026-05-17 05:36:22','2026-05-17 05:36:22','<!-- wp:shortcode -->\n[momentry_api_dashboard_v5]\n<!-- /wp:shortcode -->','Examination','','inherit','closed','closed','','1505-revision-v1','','','2026-05-17 05:36:22','2026-05-17 05:36:22','',1505,'https://m5wp.momentry.ddns.net/?p=1553',0,'revision','',0),
(1554,1,'2026-05-17 05:54:09','2026-05-17 05:54:09','<!-- wp:shortcode -->\n[momentry_api_dashboard_v6]\n<!-- /wp:shortcode -->','Examination','','inherit','closed','closed','','1505-revision-v1','','','2026-05-17 05:54:09','2026-05-17 05:54:09','',1505,'https://m5wp.momentry.ddns.net/?p=1554',0,'revision','',0),
(1555,1,'2026-05-17 06:10:20','2026-05-17 06:10:20','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Evaluation 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Evaluation </h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Measure -WW','','inherit','closed','closed','','1035-revision-v1','','','2026-05-17 06:10:20','2026-05-17 06:10:20','',1035,'https://m5wp.momentry.ddns.net/?p=1555',0,'revision','',0),
(1556,1,'2026-05-17 06:28:10','2026-05-17 06:28:10','<!-- wp:shortcode -->\n[momentry_api_dashboard_v7]\n<!-- /wp:shortcode -->','Examination','','inherit','closed','closed','','1505-revision-v1','','','2026-05-17 06:28:10','2026-05-17 06:28:10','',1505,'https://m5wp.momentry.ddns.net/?p=1556',0,'revision','',0),
(1557,1,'2026-05-17 06:42:13','2026-05-17 06:42:13','<!-- wp:shortcode -->\n[momentry_api_dashboard_v8]\n<!-- /wp:shortcode -->','Examination','','inherit','closed','closed','','1505-revision-v1','','','2026-05-17 06:42:13','2026-05-17 06:42:13','',1505,'https://m5wp.momentry.ddns.net/?p=1557',0,'revision','',0),
(1558,1,'2026-05-18 00:49:49','2026-05-18 00:49:49','<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:shortcode -->\n[ms_login_form]\n<!-- /wp:shortcode -->','Log In','','inherit','closed','closed','','44-revision-v1','','','2026-05-18 00:49:49','2026-05-18 00:49:49','',44,'https://m5wp.momentry.ddns.net/?p=1558',0,'revision','',0),
(1559,1,'2026-05-18 00:49:57','2026-05-18 00:49:57','<!-- wp:shortcode -->\n[ms_lost_password_form]\n<!-- /wp:shortcode -->','Forgot Password','','inherit','closed','closed','','1457-revision-v1','','','2026-05-18 00:49:57','2026-05-18 00:49:57','',1457,'https://m5wp.momentry.ddns.net/?p=1559',0,'revision','',0),
(1560,1,'2026-05-18 00:50:16','2026-05-18 00:50:16','<!-- wp:html -->\n<div class=\"momentry-explore\">\n  <h1>Explore</h1>\n\n  <div class=\"toolbar\">\n    <select id=\"dirSelect\">\n      <option value=\"downloads\">Downloads</option>\n      <option value=\"desktop\">Desktop</option>\n    </select>\n\n<button id=\"loadFilesBtn\">Load Files</button>\n  </div>\n\n  <div id=\"status\">Please select a directory.</div>\n  <div id=\"fileGrid\" class=\"file-grid\"></div>\n</div>\n\n<style>\n  .momentry-explore {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    padding: 30px;\n    background: #f6f7fb;\n    min-height: 100vh;\n  }\n\n  .toolbar {\n    display: flex;\n    gap: 12px;\n    margin: 20px 0;\n  }\n\n  select, button {\n    padding: 12px 16px;\n    border-radius: 12px;\n    border: 1px solid #ddd;\n  }\n\n  button {\n    background: #111827;\n    color: white;\n    cursor: pointer;\n  }\n\n  #status {\n    margin: 16px 0;\n    color: #666;\n  }\n\n  .file-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n    gap: 16px;\n  }\n\n  .file-card {\n    background: white;\n    border-radius: 18px;\n    padding: 18px;\n    box-shadow: 0 8px 20px rgba(0,0,0,0.06);\n    word-break: break-word;\n  }\n\n  .file-icon {\n    font-size: 36px;\n    margin-bottom: 10px;\n  }\n\n  .file-name {\n    font-weight: 650;\n    font-size: 14px;\n  }\n\n  .file-meta {\n    margin-top: 8px;\n    font-size: 12px;\n    color: #777;\n  }\n</style>\n\n<script>\nfunction bindExploreButton() {\n  const btn = document.getElementById(\"loadFilesBtn\");\n  if (btn) {\n    btn.addEventListener(\"click\", loadFiles);\n  }\n}\n\nif (document.readyState === \"loading\") {\n  document.addEventListener(\"DOMContentLoaded\", bindExploreButton);\n} else {\n  bindExploreButton();\n}\n\nasync function loadFiles() {\n  const dir = document.getElementById(\"dirSelect\").value;\n  const status = document.getElementById(\"status\");\n  const grid = document.getElementById(\"fileGrid\");\n\n  status.innerText = \"Loading...\";\n  grid.innerHTML = \"\";\n\n try {\n  const url = `https://january-cardstock-component.ngrok-free.dev/files?dir=${dir}&t=${Date.now()}`;\n\n  const res = await fetch(url, {\n    method: \"GET\",\n    cache: \"no-store\",\n    headers: {\n      \"Accept\": \"application/json\",\n      \"ngrok-skip-browser-warning\": \"true\"\n    }\n  });\n\n  const data = await res.json();\n\n    if (!data.ok) {\n      status.innerText = data.message || \"Failed to load files.\";\n      return;\n    }\n\n    status.innerText = `Loaded ${data.count} files from ${data.directory}`;\n\n    grid.innerHTML = data.files.map(file => {\n      const icon = file.type === \"folder\" ? \"📁\" : getFileIcon(file.name);\n\n      return `\n        <div class=\"file-card\">\n          <div class=\"file-icon\">${icon}</div>\n          <div class=\"file-name\">${file.name}</div>\n          <div class=\"file-meta\">${file.type}</div>\n          <div class=\"file-meta\">${formatSize(file.size)}</div>\n          <div class=\"file-meta\">${file.modified}</div>\n        </div>\n      `;\n    }).join(\"\");\n\n  } catch (err) {\n    status.innerText = \"API error: \" + err.message;\n  }\n}\n\nfunction getFileIcon(name) {\n  const lower = name.toLowerCase();\n  if (lower.endsWith(\".mp4\") || lower.endsWith(\".mov\") || lower.endsWith(\".avi\")) return \"🎬\";\n  if (lower.endsWith(\".jpg\") || lower.endsWith(\".jpeg\") || lower.endsWith(\".png\")) return \"🖼️\";\n  if (lower.endsWith(\".pdf\")) return \"📄\";\n  if (lower.endsWith(\".zip\")) return \"🗜️\";\n  return \"📦\";\n}\n\nfunction formatSize(bytes) {\n  if (!bytes) return \"-\";\n  if (bytes < 1024) return bytes + \" B\";\n  if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + \" KB\";\n  if (bytes < 1024 * 1024 * 1024) return Math.round(bytes / 1024 / 1024) + \" MB\";\n  return (bytes / 1024 / 1024 / 1024).toFixed(1) + \" GB\";\n}\n</script>\n<!-- /wp:html -->','Explore-Test-SC','','inherit','closed','closed','','1434-revision-v1','','','2026-05-18 00:50:16','2026-05-18 00:50:16','',1434,'https://m5wp.momentry.ddns.net/?p=1560',0,'revision','',0),
(1561,4,'2026-05-18 04:45:33','2026-05-18 04:45:33','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：所有人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">所有人物：</div>\n\n  <!-- 人物卡片 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉辨識從此人物分類移除嗎？</div>\n      <div class=\"ms-modal-sub\">您仍可以從人物管理將其加回</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n/* 防止 .ms-main 的 border-radius 裁切按鈕左上角 */\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button (查看重要人物)\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn {\n  border-color: #d1d5db;\n  font-weight: 500;\n}\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon {\n  color: #f59e0b;\n  font-size: 14px;\n}\n.ms-ppl-star-toggle-btn.active {\n  background: #fffbeb;\n  border-color: #f59e0b;\n  color: #92400e;\n}\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none;\n  position: absolute;\n  right: 0; top: 44px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed;\n  padding: 14px 18px;\n  z-index: 200;\n  min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase;\n  margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none;\n  font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar (toolbar)\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff;\n  min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative;\n  overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25);\n  display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n\n/* 右上角 編輯 按鈕 */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px; /* 留空間給右上角編輯按鈕 */\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* Name row */\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n/* 星星按鈕（詳情頁）*/\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s;\n  padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name {\n  font-size: 20px; font-weight: 700; color: #202124;\n}\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n/* 新增標籤按鈕 */\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0;\n  transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases {\n  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px;\n}\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px;\n  font-size: 11.5px; color: #5f6368;\n}\n.ms-ppl-detail-meta {\n  font-size: 13px; color: #3c4043;\n  margin-bottom: 7px; display: flex; align-items: baseline; gap: 8px;\n}\n.ms-ppl-meta-label {\n  font-weight: 700; color: #202124; white-space: nowrap;\n  font-size: 12px; letter-spacing: .03em;\n}\n.ms-ppl-detail-notes {\n  font-size: 12.5px; color: #9aa0a6; margin-top: 4px;\n}\n\n/* Edit mode layout */\n.ms-ppl-edit-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 10px;\n  flex-wrap: wrap;\n}\n\n.ms-ppl-edit-name-row {\n  margin-bottom: 8px;\n}\n\n.ms-ppl-edit-name-input {\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  flex: 1;\n  min-width: 160px;\n}\n\n.ms-ppl-edit-alias-row {\n  padding-left: 32px; /* 對齊人名輸入框（星星寬度）*/\n  margin-bottom: 16px;\n  gap: 6px;\n  align-items: center;\n}\n\n.ms-ppl-alias-wrap-inner {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  align-items: center;\n}\n\n/* inline alias input */\n.ms-ppl-alias-inline-wrap {\n  display: flex;\n  align-items: center;\n}\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  min-width: 140px;\n  transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n/* 欄位對齊區 */\n.ms-ppl-edit-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 16px;\n}\n\n.ms-ppl-edit-field-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.ms-ppl-edit-field-row--top {\n  align-items: flex-start;\n}\n\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  color: #202124;\n  letter-spacing: .03em;\n  min-width: 30px;\n  text-align: right;\n  flex-shrink: 0;\n  padding-top: 2px;\n}\n\n.ms-ppl-edit-field-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.ms-ppl-edit-actions {\n  display: flex;\n  gap: 8px;\n  padding-left: 42px;\n}\n\n/* ══════════════════════════════════════\n   Unified Box Style（view + edit 共用）\n══════════════════════════════════════ */\n\n/* View mode 顯示框 — 純文字，無框無背景 */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  min-height: 24px;\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  padding: 2px 0;\n}\n.ms-ppl-view-name-box {\n  font-size: 20px;\n  font-weight: 700;\n  flex: 1;\n  min-width: 0;\n}\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box {\n  flex: 1;\n  min-width: 0;\n  color: #3c4043;\n}\n.ms-ppl-view-notes-box {\n  flex: 1;\n  min-width: 0;\n  min-height: 24px;\n  align-items: flex-start;\n  color: #9aa0a6;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n/* Edit inputs — 統一圓角陰影 */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px;\n  color: #202124;\n  outline: none;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0;\n  box-sizing: border-box;\n  width: 100%;\n}\n.ms-ppl-edit-input:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n.ms-ppl-edit-textarea {\n  width: 100%;\n  border: 1.5px solid #e8eaed;\n  border-radius: 12px;\n  padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  color: #202124;\n  outline: none;\n  resize: vertical;\n  min-height: 72px;\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.1);\n}\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1;\n  padding: 0; display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 28px;\n}\n\n/* + 按鈕 */\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face {\n  position: relative; flex-shrink: 0; cursor: pointer;\n}\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent;\n  background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n/* ✕ 移除按鈕（edit mode 時顯示）*/\n.ms-ppl-strip-remove-btn {\n  display: none;\n  position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none;\n  place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n/* › 按鈕 */\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu（右鍵 / hover）\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed;\n  padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label {\n  font-size: 13px; color: #5f6368; margin-bottom: 16px;\n}\n.ms-ppl-media-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));\n  gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden;\n  background: #f0f0f0; cursor: pointer;\n  transition: transform .15s, box-shadow .15s;\n  border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative;\n  overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%; object-fit: cover; display: block;\n}\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700;\n  padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff;\n  font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub {\n  font-size: 10.5px; color: #9aa0a6;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* ══════════════════════════════════════\n   Modals (shared)\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999;\n  place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px;\n  padding: 30px 34px; max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title {\n  font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px;\n}\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* ══════════════════════════════════════\n   Merge Modal（較大）\n══════════════════════════════════════ */\n.ms-modal-merge {\n  max-width: 640px; width: 92%;\n  padding: 32px 36px;\n  text-align: left;\n}\n.ms-merge-header {\n  display: flex; align-items: center; gap: 16px;\n  margin-bottom: 20px;\n}\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text {\n  font-size: 16px; font-weight: 600; color: #202124;\n}\n.ms-merge-divider {\n  border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px;\n}\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px;\n  transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n\n.ms-merge-grid {\n  display: flex; flex-wrap: wrap; gap: 16px;\n  min-height: 120px; margin-bottom: 28px;\n}\n.ms-merge-face-card {\n  display: flex; flex-direction: column; align-items: center;\n  gap: 6px; cursor: pointer;\n}\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px;\n  overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent;\n  transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img {\n  border-color: #1a56db;\n  box-shadow: 0 0 0 3px rgba(26,86,219,.18);\n}\n.ms-merge-face-name {\n  font-size: 12px; color: #3c4043; text-align: center;\n  max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n.ms-merge-footer {\n  display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Silhouette placeholder */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-18 04:45:33','2026-05-18 04:45:33','',1359,'https://m5wp.momentry.ddns.net/?p=1561',0,'revision','',0),
(1562,6,'2026-05-18 06:44:27','2026-05-18 06:44:27','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n}\n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-18 06:44:27','2026-05-18 06:44:27','',1356,'https://m5wp.momentry.ddns.net/?p=1562',0,'revision','',0),
(1563,6,'2026-05-18 06:49:46','2026-05-18 06:49:46','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','People-Files 人物-檔案管理 -LT','','inherit','closed','closed','','1356-revision-v1','','','2026-05-18 06:49:46','2026-05-18 06:49:46','',1356,'https://m5wp.momentry.ddns.net/?p=1563',0,'revision','',0),
(1564,4,'2026-05-18 09:40:19','2026-05-18 09:40:19','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (isPending) {\n      var pendingBadge = document.createElement(\'div\');\n      pendingBadge.className = \'ms-ppl-face-pending\';\n      pendingBadge.textContent = \'待定\';\n      imgWrap.appendChild(pendingBadge);\n    } else if (person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\' + (isPending ? \' pending-name\' : \'\');\n    nameEl.textContent = person.name || \'（待定）\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    card.addEventListener(\'contextmenu\', function (e) {\n      e.preventDefault(); e.stopPropagation();\n      state.ctxCardPerson = person;\n      showCardCtxMenu(e.clientX, e.clientY, person);\n    });\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-18 09:40:19','2026-05-18 09:40:19','',1359,'https://m5wp.momentry.ddns.net/?p=1564',0,'revision','',0),
(1565,4,'2026-05-18 09:49:34','2026-05-18 09:49:34','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\' + (isPending ? \' pending-name\' : \'\');\n    nameEl.textContent = person.name || \'（待定）\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      renderGrid();\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-18 09:49:34','2026-05-18 09:49:34','',1359,'https://m5wp.momentry.ddns.net/?p=1565',0,'revision','',0),
(1566,4,'2026-05-18 09:54:33','2026-05-18 09:54:33','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\';\n    nameEl.textContent = person.name || \'\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\');\n  if (pendingCtxMerge) {\n    pendingCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hidePendingCtxMenu();\n    });\n  }\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      renderGrid();\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-18 09:54:33','2026-05-18 09:54:33','',1359,'https://m5wp.momentry.ddns.net/?p=1566',0,'revision','',0),
(1567,4,'2026-05-18 09:57:26','2026-05-18 09:57:26','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  lt-people-people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'lt-people-people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\';\n    nameEl.textContent = person.name || \'\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\');\n  if (pendingCtxMerge) {\n    pendingCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hidePendingCtxMenu();\n    });\n  }\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      /* 從 PENDING_PEOPLE 移除，推入 MOCK_PEOPLE */\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      /* 直接開 detail 編輯模式 */\n      openDetail(person);\n      setTimeout(function () {\n        setVal(\'msPplEditName\', person.name);\n        setVal(\'msPplEditRole\', person.role);\n        setVal(\'msPplEditNotes\', person.notes);\n        state.currentAliases = (person.aliases || []).slice();\n        renderAliases();\n        syncDetailStarBtns(person);\n        setEditMode(true);\n        renderFaceStrip(person);\n      }, 50);\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-18 09:57:26','2026-05-18 09:57:26','',1359,'https://m5wp.momentry.ddns.net/?p=1567',0,'revision','',0),
(1568,1,'2026-05-19 00:57:08','2026-05-19 00:57:08','<!-- wp:shortcode -->\n[momentry_api_logs]\n<!-- /wp:shortcode -->','Logs','','publish','closed','closed','','logs','','','2026-05-26 07:05:06','2026-05-26 07:05:06','',0,'https://m5wp.momentry.ddns.net/?page_id=1568',0,'page','',0),
(1569,1,'2026-05-19 00:57:04','2026-05-19 00:57:04','','Logs','','inherit','closed','closed','','1568-revision-v1','','','2026-05-19 00:57:04','2026-05-19 00:57:04','',1568,'https://m5wp.momentry.ddns.net/?p=1569',0,'revision','',0),
(1570,1,'2026-05-19 00:59:30','2026-05-19 00:59:30','<!-- wp:html -->\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Metrics </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n<!-- /wp:html -->','Metrics','','publish','closed','closed','','metrics','','','2026-05-25 11:29:40','2026-05-25 11:29:40','',0,'https://m5wp.momentry.ddns.net/?page_id=1570',0,'page','',0),
(1571,1,'2026-05-19 00:59:25','2026-05-19 00:59:25','','Metrics','','inherit','closed','closed','','1570-revision-v1','','','2026-05-19 00:59:25','2026-05-19 00:59:25','',1570,'https://m5wp.momentry.ddns.net/?p=1571',0,'revision','',0),
(1572,1,'2026-05-19 01:03:17','2026-05-19 01:03:17','<!-- wp:shortcode -->\n[momentry_api_dashboard_v8]\n<!-- /wp:shortcode -->','API console','','inherit','closed','closed','','1505-revision-v1','','','2026-05-19 01:03:17','2026-05-19 01:03:17','',1505,'https://m5wp.momentry.ddns.net/?p=1572',0,'revision','',0),
(1573,1,'2026-05-19 01:07:05','2026-05-19 01:07:05','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n</style>\n\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Evaluation </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Evaluation','','publish','closed','closed','','evaluation','','','2026-05-25 11:32:04','2026-05-25 11:32:04','',0,'https://m5wp.momentry.ddns.net/?page_id=1573',0,'page','',0),
(1574,1,'2026-05-19 01:07:02','2026-05-19 01:07:02','','Evaluation','','inherit','closed','closed','','1573-revision-v1','','','2026-05-19 01:07:02','2026-05-19 01:07:02','',1573,'https://m5wp.momentry.ddns.net/?p=1574',0,'revision','',0),
(1575,4,'2026-05-19 12:12:34','2026-05-19 12:12:34','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\';\n    nameEl.textContent = person.name || \'\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\');\n  if (pendingCtxMerge) {\n    pendingCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hidePendingCtxMenu();\n    });\n  }\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      /* 從 PENDING_PEOPLE 移除，推入 MOCK_PEOPLE */\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      /* 直接開 detail 編輯模式 */\n      openDetail(person);\n      setTimeout(function () {\n        setVal(\'msPplEditName\', person.name);\n        setVal(\'msPplEditRole\', person.role);\n        setVal(\'msPplEditNotes\', person.notes);\n        state.currentAliases = (person.aliases || []).slice();\n        renderAliases();\n        syncDetailStarBtns(person);\n        setEditMode(true);\n        renderFaceStrip(person);\n      }, 50);\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People-People 人物-人物管理 -WW','','inherit','closed','closed','','1359-revision-v1','','','2026-05-19 12:12:34','2026-05-19 12:12:34','',1359,'https://m5wp.momentry.ddns.net/?p=1575',0,'revision','',0),
(1576,4,'2026-05-19 12:15:46','2026-05-19 12:15:46','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\';\n    nameEl.textContent = person.name || \'\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\');\n  if (pendingCtxMerge) {\n    pendingCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hidePendingCtxMenu();\n    });\n  }\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      /* 從 PENDING_PEOPLE 移除，推入 MOCK_PEOPLE */\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      /* 直接開 detail 編輯模式 */\n      openDetail(person);\n      setTimeout(function () {\n        setVal(\'msPplEditName\', person.name);\n        setVal(\'msPplEditRole\', person.role);\n        setVal(\'msPplEditNotes\', person.notes);\n        state.currentAliases = (person.aliases || []).slice();\n        renderAliases();\n        syncDetailStarBtns(person);\n        setEditMode(true);\n        renderFaceStrip(person);\n      }, 50);\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-19 12:15:46','2026-05-19 12:15:46','',1359,'https://m5wp.momentry.ddns.net/?p=1576',0,'revision','',0),
(1577,6,'2026-05-20 06:04:44','2026-05-20 06:04:44','<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:html -->\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Upgrade plan </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n<!-- /wp:html -->','Upgrade plan','','inherit','closed','closed','','627-revision-v1','','','2026-05-20 06:04:44','2026-05-20 06:04:44','',627,'https://m5wp.momentry.ddns.net/?p=1577',0,'revision','',0),
(1578,6,'2026-05-20 06:06:05','2026-05-20 06:06:05','<!-- wp:html -->\n<!-- Help Page Content -->\n<div id=\"ms-help-page\">\n  <div class=\"ms-help-shell\">\n    <div class=\"ms-help-top\">\n      <div class=\"ms-help-contact\">\n        <h2>Contact Us</h2>\n\n        <div class=\"ms-help-contact-block\">\n          <div class=\"ms-help-label\">Call us at:</div>\n          <div class=\"ms-help-value\">+886-3-5600258</div>\n        </div>\n\n        <div class=\"ms-help-contact-block\">\n          <div class=\"ms-help-label\">Support:</div>\n          <div class=\"ms-help-value\">marketing@accusys.com.tw</div>\n        </div>\n      </div>\n\n      <div class=\"ms-help-report\">\n        <h2>問題回報</h2>\n\n        <div class=\"ms-help-report-row\">\n          <textarea id=\"ms-help-report-textarea\" placeholder=\"請輸入您遇到的問題或想回報的內容...\"></textarea>\n          <button id=\"ms-help-send-btn\" type=\"button\">傳送</button>\n        </div>\n\n        <div id=\"ms-help-report-status\" class=\"ms-help-report-status\" aria-live=\"polite\"></div>\n      </div>\n    </div>\n\n    <div class=\"ms-help-divider\"></div>\n\n    <div class=\"ms-help-faq\">\n      <h2>常見問題</h2>\n\n      <div class=\"ms-faq-item\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>歷史記錄怎麼刪除？</span>\n          <span class=\"ms-faq-icon\">＋</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            請到左側歷史記錄列表，將滑鼠移到要刪除的項目上，點擊刪除按鈕即可移除該筆記錄。\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ms-faq-item\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>如何更改用戶名？</span>\n          <span class=\"ms-faq-icon\">＋</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            若目前系統尚未開放前台修改用戶名，請聯繫管理員或支援窗口協助處理。\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ms-faq-item\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>如何查看以前搜索過的視頻？</span>\n          <span class=\"ms-faq-icon\">＋</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            您可以從左側歷史記錄中點選先前的搜尋項目，即可查看當時搜尋過的影片與結果內容。\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  #ms-help-page{\n    width: 100%;\n    min-height: calc(100vh - 40px);\n    background: #ffffff;\n    border: 1px solid #dcdcdc;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);\n    box-sizing: border-box;\n    padding: 54px 64px 56px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n    color: #6a6a6a;\n  }\n\n  #ms-help-page *{\n    box-sizing: border-box;\n  }\n\n  #ms-help-page .ms-help-shell{\n    width: 100%;\n    max-width: 1040px;\n    margin: 56px auto 0;\n  }\n\n  #ms-help-page .ms-help-top{\n    display: grid;\n    grid-template-columns: 340px 1fr;\n    gap: 74px;\n    align-items: start;\n  }\n\n  #ms-help-page h2{\n    margin: 0 0 22px;\n    font-size: 18px;\n    line-height: 1.2;\n    font-weight: 700;\n    letter-spacing: 1.2px;\n    color: #666666;\n  }\n\n  #ms-help-page .ms-help-contact-block{\n    margin-bottom: 28px;\n  }\n\n  #ms-help-page .ms-help-label{\n    font-size: 16px;\n    line-height: 1.45;\n    font-weight: 500;\n    color: #6d6d6d;\n    letter-spacing: 0.6px;\n  }\n\n  #ms-help-page .ms-help-value{\n    font-size: 16px;\n    line-height: 1.45;\n    font-weight: 500;\n    color: #6d6d6d;\n    letter-spacing: 0.6px;\n  }\n\n  #ms-help-page .ms-help-report-row{\n    display: flex;\n    align-items: flex-end;\n    gap: 18px;\n  }\n\n  #ms-help-page textarea{\n    width: 100%;\n    min-width: 0;\n    height: 150px;\n    resize: none;\n    border: 1px solid #d4d4d4;\n    border-radius: 18px;\n    background: #ffffff;\n    padding: 16px 18px;\n    outline: none;\n    font-size: 14px;\n    color: #666;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n  }\n\n  #ms-help-page textarea:focus{\n    border-color: #c6c6c6;\n  }\n\n  #ms-help-page .ms-help-report button{\n    width: 92px;\n    height: 40px;\n    border-radius: 13px;\n    border: 1px solid #d2d2d2;\n    background: #ffffff;\n    color: #666666;\n    font-size: 14px;\n    font-weight: 600;\n    letter-spacing: 0.8px;\n    cursor: pointer;\n    box-shadow: 0 2px 5px rgba(0,0,0,.08);\n    flex: 0 0 auto;\n  }\n\n  #ms-help-page .ms-help-report button:hover{\n    background: #fafafa;\n  }\n\n  #ms-help-page .ms-help-report button:disabled{\n    opacity: .6;\n    cursor: not-allowed;\n  }\n\n  #ms-help-page .ms-help-report-status{\n    min-height: 20px;\n    margin-top: 10px;\n    font-size: 13px;\n    line-height: 1.4;\n    color: #8a8a8a;\n  }\n\n  #ms-help-page .ms-help-report-status.is-error{\n    color: #c15b5b;\n  }\n\n  #ms-help-page .ms-help-report-status.is-success{\n    color: #5f8a63;\n  }\n\n  #ms-help-page .ms-help-divider{\n    margin: 48px 0 34px;\n    border-top: 1px solid #e8e8e8;\n  }\n\n  #ms-help-page .ms-help-faq h2{\n    margin-bottom: 18px;\n  }\n\n  #ms-help-page .ms-faq-item{\n    border-bottom: 1px solid #ececec;\n  }\n\n  #ms-help-page .ms-faq-q{\n    width: 100%;\n    border: 0;\n    outline: none;\n    box-shadow: none;\n    background: transparent;\n    padding: 14px 10px 14px 0;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: left;\n    cursor: pointer;\n    color: #6a6a6a;\n  }\n\n  #ms-help-page .ms-faq-q:focus,\n  #ms-help-page .ms-faq-q:active,\n  #ms-help-page .ms-faq-q:focus-visible{\n    outline: none !important;\n    box-shadow: none !important;\n    border: 0 !important;\n  }\n\n  #ms-help-page .ms-faq-q span:first-child{\n    font-size: 16px;\n    line-height: 1.4;\n    font-weight: 700;\n    letter-spacing: 0.4px;\n  }\n\n  #ms-help-page .ms-faq-icon{\n    width: 26px;\n    text-align: center;\n    font-size: 24px;\n    line-height: 1;\n    color: #a2a2a2;\n    flex: 0 0 auto;\n    margin-left: 16px;\n  }\n\n  #ms-help-page .ms-faq-a{\n    display: none;\n    padding: 0 42px 16px 0;\n  }\n\n  #ms-help-page .ms-faq-item.is-open .ms-faq-a{\n    display: block;\n  }\n\n  #ms-help-page .ms-faq-a-inner{\n    font-size: 14px;\n    line-height: 1.7;\n    color: #7a7a7a;\n    padding-bottom: 2px;\n  }\n\n  @media (max-width: 1200px){\n    #ms-help-page{\n      padding: 42px 40px 48px;\n    }\n\n    #ms-help-page .ms-help-shell{\n      margin-top: 34px;\n    }\n\n    #ms-help-page .ms-help-top{\n      grid-template-columns: 1fr;\n      gap: 34px;\n    }\n  }\n\n  @media (max-width: 768px){\n    #ms-help-page{\n      padding: 28px 22px 36px;\n      min-height: auto;\n    }\n\n    #ms-help-page .ms-help-shell{\n      margin-top: 12px;\n    }\n\n    #ms-help-page h2{\n      font-size: 16px;\n      margin-bottom: 16px;\n    }\n\n    #ms-help-page .ms-help-label,\n    #ms-help-page .ms-help-value{\n      font-size: 14px;\n    }\n\n    #ms-help-page .ms-help-report-row{\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    #ms-help-page .ms-help-report button{\n      width: 100%;\n    }\n\n    #ms-help-page .ms-faq-q span:first-child{\n      font-size: 15px;\n    }\n\n    #ms-help-page .ms-faq-a{\n      padding-right: 0;\n    }\n  }\n</style>\n\n<script>\n(function(){\n  var root = document.getElementById(\'ms-help-page\');\n  if(!root) return;\n\n  var items = root.querySelectorAll(\'.ms-faq-item\');\n\n  items.forEach(function(item){\n    var btn = item.querySelector(\'.ms-faq-q\');\n    if(!btn) return;\n\n    btn.addEventListener(\'click\', function(){\n      var opened = item.classList.contains(\'is-open\');\n\n      items.forEach(function(other){\n        other.classList.remove(\'is-open\');\n        var icon = other.querySelector(\'.ms-faq-icon\');\n        if(icon) icon.textContent = \'＋\';\n      });\n\n      if(!opened){\n        item.classList.add(\'is-open\');\n        var thisIcon = item.querySelector(\'.ms-faq-icon\');\n        if(thisIcon) thisIcon.textContent = \'－\';\n      }\n    });\n  });\n\n  var textarea = root.querySelector(\'#ms-help-report-textarea\');\n  var sendBtn  = root.querySelector(\'#ms-help-send-btn\');\n  var statusEl = root.querySelector(\'#ms-help-report-status\');\n  var DRAFT_KEY = \'ms_help_report_draft_v3\';\n  var REPORT_API = window.location.origin + \'/wp-json/momentry/v1/help-report\';\n\n  if(textarea){\n    try{\n      var savedDraft = localStorage.getItem(DRAFT_KEY);\n      if(savedDraft) textarea.value = savedDraft;\n    }catch(e){}\n\n    textarea.addEventListener(\'input\', function(){\n      try{\n        localStorage.setItem(DRAFT_KEY, textarea.value || \'\');\n      }catch(e){}\n      clearStatus();\n    });\n  }\n\n  if(sendBtn){\n    sendBtn.addEventListener(\'click\', function(){\n      submitReport();\n    });\n  }\n\n  if(textarea){\n    textarea.addEventListener(\'keydown\', function(e){\n      if((e.ctrlKey || e.metaKey) && e.key === \'Enter\'){\n        e.preventDefault();\n        submitReport();\n      }\n    });\n  }\n\n  function submitReport(){\n    if(!textarea || !sendBtn) return;\n\n    var message = (textarea.value || \'\').trim();\n\n    if(!message){\n      setStatus(\'請先輸入問題內容。\', \'error\');\n      textarea.focus();\n      return;\n    }\n\n    sendBtn.disabled = true;\n    setStatus(\'傳送中...\', \'\');\n\n    var payload = {\n      message: message,\n      page: window.location.href,\n      user_agent: navigator.userAgent || \'\',\n      submitted_at: new Date().toISOString()\n    };\n\n    fetch(REPORT_API, {\n      method: \'POST\',\n      credentials: \'include\',\n      headers: {\n        \'Content-Type\': \'application/json\',\n        \'X-WP-Nonce\': window.MS_NONCE || \'\'\n      },\n      body: JSON.stringify(payload)\n    })\n    .then(function(res){\n      return res.json().catch(function(){\n        return {};\n      }).then(function(data){\n        return { ok: res.ok, status: res.status, data: data };\n      });\n    })\n    .then(function(result){\n      if(!result.ok){\n        throw new Error(result.data && result.data.message ? result.data.message : \'送出失敗\');\n      }\n\n      textarea.value = \'\';\n      try{\n        localStorage.removeItem(DRAFT_KEY);\n      }catch(e){}\n\n      setStatus(\'已成功送出問題回報。\', \'success\');\n    })\n    .catch(function(err){\n      setStatus(err && err.message ? err.message : \'送出失敗，請稍後再試。\', \'error\');\n    })\n    .finally(function(){\n      sendBtn.disabled = false;\n    });\n  }\n\n  function setStatus(message, type){\n    if(!statusEl) return;\n    statusEl.textContent = message || \'\';\n    statusEl.classList.remove(\'is-error\', \'is-success\');\n\n    if(type === \'error\'){\n      statusEl.classList.add(\'is-error\');\n    }else if(type === \'success\'){\n      statusEl.classList.add(\'is-success\');\n    }\n  }\n\n  function clearStatus(){\n    setStatus(\'\', \'\');\n  }\n})();\n</script>\n<!-- /wp:html -->','Help','','inherit','closed','closed','','641-revision-v1','','','2026-05-20 06:06:05','2026-05-20 06:06:05','',641,'https://m5wp.momentry.ddns.net/?p=1578',0,'revision','',0),
(1579,6,'2026-05-20 06:07:32','2026-05-20 06:07:32','<!-- wp:html -->\n<!-- Personalization / Settings 右侧内容区 -->\n<div id=\"ms-personalization-page\">\n  <div class=\"ms-page-inner\">\n\n    <div class=\"ms-profile-top\">\n      <div class=\"ms-avatar\" id=\"msAvatar\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 64 64\" fill=\"none\">\n          <circle cx=\"32\" cy=\"22\" r=\"12\" fill=\"#d7d7d7\"></circle>\n          <path d=\"M12 54c2.8-10 10.8-16 20-16s17.2 6 20 16\" fill=\"#d7d7d7\"></path>\n        </svg>\n      </div>\n\n      <button class=\"ms-photo-btn\" id=\"msPhotoBtn\" type=\"button\">更改照片</button>\n      <input id=\"msPhotoInput\" type=\"file\" accept=\"image/*\" hidden>\n    </div>\n\n    <div class=\"ms-settings-grid\">\n\n      <!-- 左侧 -->\n      <div class=\"ms-col ms-col-left\">\n        <div class=\"ms-field\">\n          <label for=\"ms-name\">Name</label>\n          <input id=\"ms-name\" type=\"text\" value=\"Una Nieh\">\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-email\">Email</label>\n          <input id=\"ms-email\" type=\"email\" value=\"una@mail.com\" readonly>\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-birthday\">Birthday</label>\n          <input id=\"ms-birthday\" type=\"text\" value=\"0000/00/00\" placeholder=\"YYYY/MM/DD\">\n        </div>\n\n        <div class=\"ms-field ms-password-row\">\n          <label for=\"ms-password\">Password</label>\n          <div class=\"ms-inline ms-password-inline\">\n            <input id=\"ms-password\" type=\"password\" value=\"\" placeholder=\"請輸入目前密碼\" autocomplete=\"new-password\">\n            <button class=\"ms-small-btn\" id=\"msChangePasswordBtn\" type=\"button\">更改密碼</button>\n          </div>\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-new-password\">輸入新密碼</label>\n          <input id=\"ms-new-password\" type=\"password\" value=\"\" disabled autocomplete=\"new-password\">\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-confirm-password\">再次確認密碼</label>\n          <input id=\"ms-confirm-password\" type=\"password\" value=\"\" disabled autocomplete=\"new-password\">\n        </div>\n      </div>\n\n      <!-- 右侧 -->\n      <div class=\"ms-col ms-col-right\">\n        <div class=\"ms-toggle-row\">\n          <div class=\"ms-toggle-label\">訂閱電子報</div>\n          <label class=\"ms-switch\">\n            <input id=\"msNewsletter\" type=\"checkbox\">\n            <span class=\"ms-slider\"></span>\n          </label>\n        </div>\n\n        <div class=\"ms-toggle-row ms-toggle-help-row\">\n          <div class=\"ms-toggle-label\">登入通知</div>\n          <div class=\"ms-toggle-right\">\n            <label class=\"ms-switch\">\n              <input id=\"msLoginNotice\" type=\"checkbox\" checked>\n              <span class=\"ms-slider\"></span>\n            </label>\n\n            <div class=\"ms-help-wrap\">\n              <span class=\"ms-help-icon\">?</span>\n              <span class=\"ms-help-bubble\">每次登入會發送 Email 通知</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"ms-language-row\">\n          <div class=\"ms-toggle-label\">語言</div>\n\n          <div class=\"ms-language-box\" id=\"msLangBox\">\n            <button type=\"button\" class=\"ms-language-trigger\" id=\"msLangTrigger\" aria-expanded=\"false\">\n              <span id=\"msLangCurrent\">繁體中文</span>\n              <span class=\"ms-language-arrow\">▾</span>\n            </button>\n\n            <div class=\"ms-language-menu\" id=\"msLangMenu\">\n              <button type=\"button\" class=\"ms-language-option is-active\" data-value=\"繁體中文\">繁體中文</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"簡體中文\">簡體中文</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"日本語\">日本語</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"English\">English</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"韓文\">韓文</button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div class=\"ms-save-wrap\">\n      <button class=\"ms-save-btn\" id=\"msSaveBtn\" type=\"button\">保存更改</button>\n    </div>\n\n  </div>\n</div>\n\n<style>\n  /* 只作用在右侧，不改左边 sidebar */\n  #ms-personalization-page{\n    min-height: 100vh;\n    padding: 36px 42px 44px;\n    box-sizing: border-box;\n    background: #ffffff;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n    color: #4a4a4a;\n  }\n\n  #ms-personalization-page *{\n    box-sizing: border-box;\n  }\n\n  #ms-personalization-page .ms-page-inner{\n    max-width: 960px;\n    margin: 0 auto;\n  }\n\n  #ms-personalization-page .ms-profile-top{\n    display: flex;\n    align-items: center;\n    gap: 18px;\n    margin-bottom: 38px;\n    padding-left: 10px;\n  }\n\n  #ms-personalization-page .ms-avatar{\n    width: 86px;\n    height: 86px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: #f4f4f4 center center / cover no-repeat;\n  }\n\n  #ms-personalization-page .ms-avatar svg{\n    width: 86px;\n    height: 86px;\n    display: block;\n  }\n\n  #ms-personalization-page .ms-photo-btn,\n  #ms-personalization-page .ms-small-btn{\n    border: 1px solid #cfcfcf;\n    background: #fff;\n    color: #666;\n    border-radius: 12px;\n    box-shadow: 0 2px 6px rgba(0,0,0,.06);\n    cursor: pointer;\n    transition: .18s ease;\n  }\n\n  #ms-personalization-page .ms-photo-btn{\n    height: 40px;\n    padding: 0 18px;\n    font-size: 14px;\n  }\n\n  #ms-personalization-page .ms-small-btn{\n    height: 38px;\n    padding: 0 16px;\n    font-size: 14px;\n    white-space: nowrap;\n    width: fit-content;\n  }\n\n  #ms-personalization-page .ms-photo-btn:hover,\n  #ms-personalization-page .ms-small-btn:hover,\n  #ms-personalization-page .ms-save-btn:hover{\n    transform: translateY(-1px);\n    box-shadow: 0 4px 10px rgba(0,0,0,.08);\n  }\n\n  #ms-personalization-page .ms-settings-grid{\n    display: grid;\n    grid-template-columns: 1.12fr 0.95fr;\n    gap: 82px;\n    align-items: start;\n  }\n\n  #ms-personalization-page .ms-col{\n    min-width: 0;\n  }\n\n  #ms-personalization-page .ms-field{\n    display: grid;\n    grid-template-columns: 112px 1fr;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 24px;\n  }\n\n  #ms-personalization-page .ms-field > label,\n  #ms-personalization-page .ms-toggle-label{\n    font-size: 16px;\n    line-height: 1.2;\n    letter-spacing: 0.4px;\n    color: #5b5b5b;\n    font-weight: 600;\n  }\n\n  #ms-personalization-page input[type=\"text\"],\n  #ms-personalization-page input[type=\"email\"],\n  #ms-personalization-page input[type=\"password\"]{\n    width: 250px;\n    max-width: 100%;\n    height: 46px;\n    padding: 0 16px;\n    font-size: 14px;\n    border: 1px solid #cfcfcf;\n    background: #fafafa;\n    border-radius: 12px;\n    outline: none;\n    color: #666;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;\n  }\n\n  #ms-personalization-page input[type=\"text\"]:focus,\n  #ms-personalization-page input[type=\"email\"]:focus,\n  #ms-personalization-page input[type=\"password\"]:focus{\n    border-color: #9db4df;\n    box-shadow: 0 0 0 3px rgba(157,180,223,.15);\n    background: #fff;\n  }\n\n  #ms-personalization-page input[disabled],\n  #ms-personalization-page input[readonly]{\n    opacity: .72;\n    cursor: not-allowed;\n  }\n\n  #ms-personalization-page input[readonly]{\n    background: #f3f3f3;\n    color: #888;\n  }\n\n  #ms-personalization-page .ms-inline{\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n\n  #ms-personalization-page .ms-password-inline{\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: nowrap;\n  }\n\n  #ms-personalization-page .ms-password-inline input{\n    width: 250px;\n    flex: 0 0 auto;\n  }\n\n  #ms-personalization-page .ms-password-inline .ms-small-btn{\n    height: 38px;\n    padding: 0 16px;\n    white-space: nowrap;\n    flex: 0 0 auto;\n  }\n\n  /* 右侧三组一起往左一点 */\n  #ms-personalization-page .ms-col-right{\n    margin-left: -34px;\n  }\n\n  /* 这里继续缩小右边三项的文字与控件距离 */\n  #ms-personalization-page .ms-toggle-row{\n    display: grid;\n    grid-template-columns: 112px auto;\n    align-items: center;\n    gap: 4px;\n    margin-bottom: 28px;\n    min-height: 52px;\n  }\n\n  #ms-personalization-page .ms-toggle-right{\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    position: relative;\n  }\n\n  #ms-personalization-page .ms-switch{\n    position: relative;\n    display: inline-block;\n    width: 64px;\n    height: 34px;\n    flex: 0 0 auto;\n  }\n\n  #ms-personalization-page .ms-switch input{\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  #ms-personalization-page .ms-slider{\n    position: absolute;\n    inset: 0;\n    background: #d8d8d8;\n    border-radius: 999px;\n    transition: .25s ease;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);\n  }\n\n  #ms-personalization-page .ms-slider:before{\n    content: \"\";\n    position: absolute;\n    width: 26px;\n    height: 26px;\n    left: 4px;\n    top: 4px;\n    background: #fff;\n    border-radius: 50%;\n    box-shadow: 0 1px 4px rgba(0,0,0,.12);\n    transition: .25s ease;\n  }\n\n  #ms-personalization-page .ms-switch input:checked + .ms-slider{\n    background: #9db4df;\n  }\n\n  #ms-personalization-page .ms-switch input:checked + .ms-slider:before{\n    transform: translateX(30px);\n  }\n\n  #ms-personalization-page .ms-help-wrap{\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  #ms-personalization-page .ms-help-icon{\n    width: 24px;\n    height: 24px;\n    border: 1px solid #cfcfcf;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 13px;\n    color: #999;\n    background: #fff;\n    line-height: 1;\n    cursor: default;\n  }\n\n  #ms-personalization-page .ms-help-bubble{\n    position: absolute;\n    left: 34px;\n    top: 50%;\n    transform: translateY(-50%);\n    white-space: nowrap;\n    min-height: 36px;\n    padding: 0 14px;\n    border: 1px solid #d7d7d7;\n    border-radius: 12px;\n    background: #fff;\n    color: #777;\n    font-size: 13px;\n    display: inline-flex;\n    align-items: center;\n    box-shadow: 0 2px 6px rgba(0,0,0,.05);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: .18s ease;\n  }\n\n  #ms-personalization-page .ms-help-wrap:hover .ms-help-bubble{\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #ms-personalization-page .ms-language-row{\n    display: grid;\n    grid-template-columns: 112px 1fr;\n    align-items: start;\n    gap: 4px;\n    margin-top: 10px;\n  }\n\n  #ms-personalization-page .ms-language-box{\n    position: relative;\n    width: 250px;\n    max-width: 100%;\n  }\n\n  #ms-personalization-page .ms-language-trigger{\n    width: 100%;\n    height: 46px;\n    padding: 0 14px 0 16px;\n    border: 1px solid #cfcfcf;\n    border-radius: 12px;\n    background: #fff;\n    color: #555;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n  }\n\n  #ms-personalization-page .ms-language-arrow{\n    font-size: 12px;\n    color: #888;\n    margin-left: 12px;\n  }\n\n  #ms-personalization-page .ms-language-menu{\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    width: 100%;\n    background: #fff;\n    border: 1px solid #d6d6d6;\n    border-radius: 14px;\n    box-shadow: 0 10px 24px rgba(0,0,0,.08);\n    padding: 8px;\n    display: none;\n    z-index: 20;\n  }\n\n  #ms-personalization-page .ms-language-box.is-open .ms-language-menu{\n    display: block;\n  }\n\n  #ms-personalization-page .ms-language-option{\n    width: 100%;\n    border: 0;\n    background: transparent;\n    text-align: left;\n    padding: 11px 12px;\n    border-radius: 10px;\n    font-size: 14px;\n    color: #555;\n    cursor: pointer;\n  }\n\n  #ms-personalization-page .ms-language-option:hover,\n  #ms-personalization-page .ms-language-option.is-active{\n    background: #f1f1f1;\n  }\n\n  #ms-personalization-page .ms-save-wrap{\n    display: flex;\n    justify-content: center;\n    margin-top: 34px;\n  }\n\n  #ms-personalization-page .ms-save-btn{\n    min-width: 170px;\n    height: 54px;\n    border: 1px solid #cfcfcf;\n    border-radius: 16px;\n    background: #fff;\n    color: #555;\n    font-size: 17px;\n    font-weight: 500;\n    box-shadow: 0 4px 12px rgba(0,0,0,.05);\n    cursor: pointer;\n    transition: .18s ease;\n  }\n\n  @media (max-width: 1100px){\n    #ms-personalization-page .ms-settings-grid{\n      grid-template-columns: 1fr;\n      gap: 26px;\n    }\n\n    #ms-personalization-page .ms-col-right{\n      margin-left: 0;\n    }\n  }\n\n  @media (max-width: 760px){\n    #ms-personalization-page{\n      padding: 24px 18px 36px;\n    }\n\n    #ms-personalization-page .ms-field,\n    #ms-personalization-page .ms-toggle-row,\n    #ms-personalization-page .ms-language-row{\n      grid-template-columns: 1fr;\n      gap: 10px;\n      margin-bottom: 20px;\n    }\n\n    #ms-personalization-page input[type=\"text\"],\n    #ms-personalization-page input[type=\"email\"],\n    #ms-personalization-page input[type=\"password\"],\n    #ms-personalization-page .ms-inline input,\n    #ms-personalization-page .ms-password-inline input,\n    #ms-personalization-page .ms-language-box{\n      width: 100%;\n    }\n\n    #ms-personalization-page .ms-password-inline{\n      flex-wrap: wrap;\n    }\n\n    #ms-personalization-page .ms-help-bubble{\n      left: 0;\n      top: calc(100% + 8px);\n      transform: none;\n      white-space: normal;\n      min-width: 180px;\n    }\n\n    #ms-personalization-page .ms-save-btn{\n      width: 100%;\n      min-width: 0;\n      height: 56px;\n      font-size: 18px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n  var root = document.getElementById(\'ms-personalization-page\');\n  if (!root) return;\n\n  var STORAGE_KEY = \'ms_personalization_settings_v1\';\n\n  var avatar = document.getElementById(\'msAvatar\');\n  var avatarSvg = avatar ? avatar.querySelector(\'svg\') : null;\n  var photoBtn = document.getElementById(\'msPhotoBtn\');\n  var photoInput = document.getElementById(\'msPhotoInput\');\n\n  var nameInput = document.getElementById(\'ms-name\');\n  var emailInput = document.getElementById(\'ms-email\');\n  var birthdayInput = document.getElementById(\'ms-birthday\');\n\n  var currentPasswordInput = document.getElementById(\'ms-password\');\n  var newPasswordInput = document.getElementById(\'ms-new-password\');\n  var confirmPasswordInput = document.getElementById(\'ms-confirm-password\');\n  var changePasswordBtn = document.getElementById(\'msChangePasswordBtn\');\n\n  var newsletterInput = document.getElementById(\'msNewsletter\');\n  var loginNoticeInput = document.getElementById(\'msLoginNotice\');\n\n  var saveBtn = document.getElementById(\'msSaveBtn\');\n\n  var box = document.getElementById(\'msLangBox\');\n  var trigger = document.getElementById(\'msLangTrigger\');\n  var menu = document.getElementById(\'msLangMenu\');\n  var current = document.getElementById(\'msLangCurrent\');\n\n  var passwordEditMode = false;\n  var pendingPhotoData = \'\';\n\n  function getDefaultData(){\n    return {\n      name: nameInput ? nameInput.value : \'\',\n      email: emailInput ? emailInput.value : \'\',\n      birthday: birthdayInput ? birthdayInput.value : \'\',\n      password: \'12345678\',\n      newsletter: newsletterInput ? newsletterInput.checked : false,\n      loginNotice: loginNoticeInput ? loginNoticeInput.checked : true,\n      language: current ? current.textContent.trim() : \'繁體中文\',\n      photoData: \'\'\n    };\n  }\n\n  function getSavedData(){\n    try{\n      var raw = localStorage.getItem(STORAGE_KEY);\n      return raw ? JSON.parse(raw) : null;\n    }catch(err){\n      return null;\n    }\n  }\n\n  function saveData(data){\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n  }\n\n  function setAvatar(photoData){\n    if (!avatar) return;\n    if (photoData) {\n      avatar.style.backgroundImage = \'url(\"\' + photoData + \'\")\';\n      if (avatarSvg) avatarSvg.style.display = \'none\';\n    } else {\n      avatar.style.backgroundImage = \'none\';\n      if (avatarSvg) avatarSvg.style.display = \'block\';\n    }\n  }\n\n  function applyData(data){\n    if (!data) return;\n\n    if (nameInput) nameInput.value = data.name || \'\';\n    if (emailInput) emailInput.value = data.email || \'\';\n    if (birthdayInput) birthdayInput.value = data.birthday || \'\';\n    if (newsletterInput) newsletterInput.checked = !!data.newsletter;\n    if (loginNoticeInput) loginNoticeInput.checked = !!data.loginNotice;\n\n    if (currentPasswordInput) currentPasswordInput.value = \'\';\n    if (newPasswordInput) newPasswordInput.value = \'\';\n    if (confirmPasswordInput) confirmPasswordInput.value = \'\';\n\n    if (current && data.language) {\n      current.textContent = data.language;\n      if (menu) {\n        menu.querySelectorAll(\'.ms-language-option\').forEach(function(item){\n          item.classList.toggle(\'is-active\', item.getAttribute(\'data-value\') === data.language);\n        });\n      }\n    }\n\n    if (data.photoData) {\n      pendingPhotoData = data.photoData;\n      setAvatar(data.photoData);\n    }\n  }\n\n  function enablePasswordEditing(){\n    passwordEditMode = true;\n    if (newPasswordInput) newPasswordInput.disabled = false;\n    if (confirmPasswordInput) confirmPasswordInput.disabled = false;\n    if (newPasswordInput) newPasswordInput.value = \'\';\n    if (confirmPasswordInput) confirmPasswordInput.value = \'\';\n    if (changePasswordBtn) changePasswordBtn.textContent = \'取消更改\';\n    if (newPasswordInput) newPasswordInput.focus();\n  }\n\n  function disablePasswordEditing(clearFields){\n    passwordEditMode = false;\n    if (newPasswordInput) {\n      newPasswordInput.disabled = true;\n      if (clearFields) newPasswordInput.value = \'\';\n    }\n    if (confirmPasswordInput) {\n      confirmPasswordInput.disabled = true;\n      if (clearFields) confirmPasswordInput.value = \'\';\n    }\n    if (changePasswordBtn) changePasswordBtn.textContent = \'更改密碼\';\n  }\n\n  function isValidEmail(email){\n    return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n  }\n\n  function isValidBirthday(text){\n    if (!text) return true;\n    if (!/^\\d{4}\\/\\d{2}\\/\\d{2}$/.test(text)) return false;\n\n    var parts = text.split(\'/\');\n    var y = parseInt(parts[0], 10);\n    var m = parseInt(parts[1], 10);\n    var d = parseInt(parts[2], 10);\n\n    var dt = new Date(y, m - 1, d);\n    return (\n      dt.getFullYear() === y &&\n      dt.getMonth() === m - 1 &&\n      dt.getDate() === d\n    );\n  }\n\n  function getFormData(){\n    return {\n      name: nameInput ? nameInput.value.trim() : \'\',\n      email: emailInput ? emailInput.value.trim() : \'\',\n      birthday: birthdayInput ? birthdayInput.value.trim() : \'\',\n      newsletter: newsletterInput ? newsletterInput.checked : false,\n      loginNotice: loginNoticeInput ? loginNoticeInput.checked : false,\n      language: current ? current.textContent.trim() : \'繁體中文\',\n      photoData: pendingPhotoData || \'\'\n    };\n  }\n\n  function handleSave(){\n    var data = getFormData();\n    var saved = getSavedData() || getDefaultData();\n\n    if (!data.name) {\n      alert(\'請輸入姓名\');\n      nameInput && nameInput.focus();\n      return;\n    }\n\n    if (!data.email) {\n      alert(\'Email 不可為空\');\n      return;\n    }\n\n    if (!isValidEmail(data.email)) {\n      alert(\'Email 格式不正確\');\n      return;\n    }\n\n    if (!isValidBirthday(data.birthday)) {\n      alert(\'Birthday 格式請使用 YYYY/MM/DD\');\n      birthdayInput && birthdayInput.focus();\n      return;\n    }\n\n    if (passwordEditMode) {\n      var newPwd = newPasswordInput ? newPasswordInput.value : \'\';\n      var confirmPwd = confirmPasswordInput ? confirmPasswordInput.value : \'\';\n\n      if (!newPwd) {\n        alert(\'請輸入新密碼\');\n        newPasswordInput && newPasswordInput.focus();\n        return;\n      }\n\n      if (newPwd.length < 6) {\n        alert(\'新密碼至少需要 6 碼\');\n        newPasswordInput && newPasswordInput.focus();\n        return;\n      }\n\n      if (newPwd !== confirmPwd) {\n        alert(\'再次確認密碼不一致\');\n        confirmPasswordInput && confirmPasswordInput.focus();\n        return;\n      }\n\n      data.password = newPwd;\n      disablePasswordEditing(true);\n    } else {\n      data.password = saved.password || \'12345678\';\n    }\n\n    saveData(data);\n\n    if (currentPasswordInput) currentPasswordInput.value = \'\';\n    alert(\'保存成功\');\n  }\n\n  function initLanguageDropdown(){\n    if(!box || !trigger || !menu || !current) return;\n\n    trigger.addEventListener(\'click\', function(e){\n      e.stopPropagation();\n      box.classList.toggle(\'is-open\');\n      trigger.setAttribute(\'aria-expanded\', box.classList.contains(\'is-open\') ? \'true\' : \'false\');\n    });\n\n    menu.addEventListener(\'click\', function(e){\n      var btn = e.target.closest(\'.ms-language-option\');\n      if(!btn) return;\n\n      var value = btn.getAttribute(\'data-value\') || btn.textContent.trim();\n      current.textContent = value;\n\n      menu.querySelectorAll(\'.ms-language-option\').forEach(function(item){\n        item.classList.remove(\'is-active\');\n      });\n      btn.classList.add(\'is-active\');\n\n      box.classList.remove(\'is-open\');\n      trigger.setAttribute(\'aria-expanded\', \'false\');\n    });\n\n    document.addEventListener(\'click\', function(e){\n      if(!box.contains(e.target)){\n        box.classList.remove(\'is-open\');\n        trigger.setAttribute(\'aria-expanded\', \'false\');\n      }\n    });\n  }\n\n  function initPhotoUpload(){\n    if (!photoBtn || !photoInput) return;\n\n    photoBtn.addEventListener(\'click\', function(){\n      photoInput.click();\n    });\n\n    photoInput.addEventListener(\'change\', function(){\n      var file = photoInput.files && photoInput.files[0];\n      if (!file) return;\n\n      if (!file.type || file.type.indexOf(\'image/\') !== 0) {\n        alert(\'請選擇圖片檔案\');\n        photoInput.value = \'\';\n        return;\n      }\n\n      var reader = new FileReader();\n      reader.onload = function(evt){\n        pendingPhotoData = evt.target.result || \'\';\n        setAvatar(pendingPhotoData);\n      };\n      reader.readAsDataURL(file);\n    });\n  }\n\n  function initPasswordFlow(){\n    if (!changePasswordBtn) return;\n\n    disablePasswordEditing(true);\n\n    changePasswordBtn.addEventListener(\'click\', function(){\n      var saved = getSavedData() || getDefaultData();\n      var currentPwd = currentPasswordInput ? currentPasswordInput.value : \'\';\n\n      if (passwordEditMode) {\n        disablePasswordEditing(true);\n        if (currentPasswordInput) currentPasswordInput.value = \'\';\n        return;\n      }\n\n      if (!currentPwd) {\n        alert(\'請先輸入目前密碼\');\n        currentPasswordInput && currentPasswordInput.focus();\n        return;\n      }\n\n      if (currentPwd !== (saved.password || \'\')) {\n        alert(\'目前密碼不正確\');\n        currentPasswordInput && currentPasswordInput.focus();\n        return;\n      }\n\n      enablePasswordEditing();\n    });\n  }\n\n  function init(){\n    initLanguageDropdown();\n    initPhotoUpload();\n    initPasswordFlow();\n\n    var saved = getSavedData();\n    if (saved) {\n      applyData(saved);\n    } else {\n      var defaults = getDefaultData();\n      saveData(defaults);\n      applyData(defaults);\n    }\n\n    if (saveBtn) {\n      saveBtn.addEventListener(\'click\', handleSave);\n    }\n  }\n\n  init();\n})();\n</script>\n<!-- /wp:html -->','Settings','','inherit','closed','closed','','639-revision-v1','','','2026-05-20 06:07:32','2026-05-20 06:07:32','',639,'https://m5wp.momentry.ddns.net/?p=1579',0,'revision','',0),
(1580,6,'2026-05-20 06:08:57','2026-05-20 06:08:57','<!-- wp:html -->\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">🎨 Personalization </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n<!-- /wp:html -->','Personalization','','inherit','closed','closed','','635-revision-v1','','','2026-05-20 06:08:57','2026-05-20 06:08:57','',635,'https://m5wp.momentry.ddns.net/?p=1580',0,'revision','',0),
(1581,6,'2026-05-20 06:10:23','2026-05-20 06:10:23','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Collection','','inherit','closed','closed','','1356-revision-v1','','','2026-05-20 06:10:23','2026-05-20 06:10:23','',1356,'https://m5wp.momentry.ddns.net/?p=1581',0,'revision','',0),
(1582,6,'2026-05-20 06:10:52','2026-05-20 06:10:52','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部文字檔案</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-20 06:10:52','2026-05-20 06:10:52','',1356,'https://m5wp.momentry.ddns.net/?p=1582',0,'revision','',0),
(1584,6,'2026-05-20 06:19:42','2026-05-20 06:19:42','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled>\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input\n          id=\"msInput\"\n          class=\"ms-input\"\n          type=\"text\"\n          inputmode=\"search\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          placeholder=\"搜尋照片或影片關鍵字…\"\n          aria-label=\"Search input\"\n        />\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'https://wp.momentry.ddns.net/ww-4-7/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n  var currentMode  = \'keyword\';\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n    currentMode = value;\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-20 06:19:42','2026-05-20 06:19:42','',341,'https://m5wp.momentry.ddns.net/?p=1584',0,'revision','',0),
(1585,4,'2026-05-20 07:16:26','2026-05-20 07:16:26','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu -->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n\n  /* ── 只在 people 頁執行 ── */\n  if (strpos($_SERVER[\'REQUEST_URI\'], \'people\') === false) return;\n\n  /* ── 打 API，key 放在 PHP 端 ── */\n  $api_url = \'https://m5api.momentry.ddns.net/api/v1/identities?page_size=100\';\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $response = wp_remote_get($api_url, [\n    \'timeout\' => 15,\n    \'headers\' => [\n      \'X-API-Key\' => $api_key,\n    ],\n  ]);\n\n  $identities_json = \'[]\';\n\n  if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {\n    $body = json_decode(wp_remote_retrieve_body($response), true);\n    if (!empty($body[\'identities\']) && is_array($body[\'identities\'])) {\n      $identities_json = wp_json_encode($body[\'identities\']);\n    }\n  }\n?>\n<script>\nwindow.MS_IDENTITIES = <?php echo $identities_json; ?>;\n</script>\n<?php\n});\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 07:16:26','2026-05-20 07:16:26','',1359,'https://m5wp.momentry.ddns.net/?p=1585',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1586,4,'2026-05-20 07:17:09','2026-05-20 07:17:09','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <!-- 查看重要人物 / 查看所有人物 切換按鈕 -->\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <!-- 重新整理 -->\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <!-- 搜尋框 -->\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <!-- 排序按鈕 -->\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- 已知人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n\n  <!-- 已知人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <!-- 分隔線 -->\n  <hr class=\"ms-ppl-hr\">\n\n  <!-- 待定人物 Section title -->\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n\n  <!-- 待定人物 grid -->\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <!-- 返回按鈕 -->\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <!-- 右上角編輯按鈕 -->\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <!-- Header -->\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <!-- 人名 + 星星 + 新增標籤 -->\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <!-- 別名 chips -->\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <!-- 角色 / 描述 — 同 edit mode 對齊 -->\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n\n        <!-- 第一行：星星 + 人名輸入 -->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n\n        <!-- 第二行：別名 tags + 新增別名（行內 inline input）-->\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n\n        <!-- 欄位區：角色 / 描述 對齊 -->\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n\n        <!-- 按鈕 -->\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <!-- Face strip：+ 按鈕 + 人臉縮圖 + > 按鈕 -->\n  <div class=\"ms-ppl-strip-wrap\">\n    <!-- + 加入合併 -->\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <!-- Media label -->\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <!-- Media grid -->\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- Hover context menu（不是此人物 / 另建人物）-->\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <!-- Modal: 確定移除人臉 -->\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵（List 頁）── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物（全域，List 和 Detail 共用）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <!-- 觸發合併的人臉 + 說明 -->\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <!-- 搜尋 -->\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <!-- 人物選擇 grid -->\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <!-- 底部按鈕 -->\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n/* ══════════════════════════════════════\n   Root / Reset\n══════════════════════════════════════ */\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px;\n  color: #202124;\n  position: relative;\n}\n\n#msPplViewList { padding-top: 6px; }\n\n.ms-main:has(#msPplViewList) {\n  overflow-x: visible;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n/* ══════════════════════════════════════\n   Shared Buttons\n══════════════════════════════════════ */\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap;\n  transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Star Toggle Button\n══════════════════════════════════════ */\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n/* ══════════════════════════════════════\n   Sort Panel\n══════════════════════════════════════ */\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px;\n  z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label {\n  display: flex; align-items: center; gap: 6px;\n  cursor: pointer; user-select: none; font-size: 13px; color: #3c4043;\n}\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n/* ══════════════════════════════════════\n   Search Bar\n══════════════════════════════════════ */\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px;\n  transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n/* ══════════════════════════════════════\n   Views\n══════════════════════════════════════ */\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n\n/* Section Title */\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px;\n  display: flex; align-items: center; gap: 6px;\n}\n\n/* ── 分隔線 ── */\n.ms-ppl-hr {\n  border: none;\n  border-top: 1.5px solid #e8eaed;\n  margin: 32px 0 24px;\n}\n\n/* ══════════════════════════════════════\n   Face Cards (Grid)\n══════════════════════════════════════ */\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s;\n  flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 18px rgba(0,0,0,.13);\n}\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n\n/* Star badge on card */\n.ms-ppl-card-star {\n  position: absolute; top: 6px; left: 6px;\n  font-size: 16px; color: #f59e0b;\n  text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none;\n}\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n\n/* New badge */\n.ms-ppl-face-new {\n  position: absolute; top: 6px; left: 6px;\n  background: #f59e0b; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n/* Pending badge */\n.ms-ppl-face-pending {\n  position: absolute; top: 6px; left: 6px;\n  background: #6b7280; color: #fff;\n  font-size: 9px; font-weight: 700;\n  padding: 2px 6px; border-radius: 5px;\n  letter-spacing: .03em; z-index: 1;\n}\n\n.ms-ppl-face-name {\n  font-size: 12.5px; font-weight: 500; color: #3c4043;\n  text-align: center; white-space: nowrap;\n  overflow: hidden; text-overflow: ellipsis; max-width: 120px;\n}\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n/* ══════════════════════════════════════\n   Detail View — Header\n══════════════════════════════════════ */\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0;\n  transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n\n.ms-ppl-detail-header {\n  display: flex; align-items: flex-start; gap: 22px;\n  margin-bottom: 28px; position: relative;\n  padding-top: 32px;\n}\n\n.ms-ppl-detail-avatar {\n  width: 120px; height: 120px; border-radius: 20px;\n  background: #e0e0e0; flex-shrink: 0; overflow: hidden;\n}\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n.ms-ppl-detail-name-row {\n  display: flex; align-items: center; gap: 8px;\n  flex-wrap: wrap; margin-bottom: 10px;\n}\n\n.ms-ppl-star-btn {\n  font-size: 20px; background: transparent; border: none;\n  cursor: pointer; outline: none; line-height: 1;\n  color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0;\n}\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n\n.ms-ppl-add-tag-btn {\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; color: #9aa0a6;\n  cursor: pointer; outline: none; padding: 0; transition: color .15s;\n}\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip {\n  display: inline-flex; align-items: center;\n  background: #f0f0f0; border-radius: 999px;\n  padding: 3px 10px; font-size: 11.5px; color: #5f6368;\n}\n\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input {\n  border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px; color: #202124; outline: none; background: #fff;\n  min-width: 140px; transition: border-color .15s;\n}\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px;\n}\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n\n/* View mode boxes */\n.ms-ppl-view-box {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124;\n  min-height: 24px; display: flex; align-items: center;\n  word-break: break-word; padding: 2px 0;\n}\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box {\n  flex: 1; min-width: 0; min-height: 24px; align-items: flex-start;\n  color: #9aa0a6; font-size: 13px; white-space: pre-wrap;\n}\n\n/* Edit inputs */\n.ms-ppl-edit-input {\n  border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; color: #202124; outline: none; background: #fff;\n  box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s;\n  min-width: 0; box-sizing: border-box; width: 100%;\n}\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n.ms-ppl-edit-textarea {\n  width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px;\n  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06);\n  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;\n}\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n\n/* Alias tags */\n.ms-ppl-alias-tag {\n  display: inline-flex; align-items: center; gap: 5px;\n  background: #e8eaed; border-radius: 999px; padding: 4px 10px;\n  font-size: 12.5px; color: #202124;\n}\n.ms-ppl-alias-tag button {\n  border: none; background: transparent; cursor: pointer;\n  color: #5f6368; font-size: 14px; line-height: 1; padding: 0;\n  display: flex; align-items: center;\n}\n.ms-ppl-alias-add-btn {\n  border: 1.5px dashed #bbb; background: transparent;\n  border-radius: 999px; padding: 4px 10px;\n  font-size: 12px; color: #5f6368; cursor: pointer; outline: none;\n}\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n/* ══════════════════════════════════════\n   Face Strip\n══════════════════════════════════════ */\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n\n.ms-ppl-strip-add-btn {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 1.5px dashed #bdc1c6; background: #fff;\n  font-size: 20px; color: #bdc1c6;\n  display: grid; place-items: center;\n  cursor: pointer; outline: none; flex-shrink: 0;\n  transition: border-color .15s, color .15s;\n}\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-face-strip {\n  display: flex; gap: 10px;\n  overflow-x: auto; padding-bottom: 4px;\n  scrollbar-width: thin; flex: 1;\n}\n\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img {\n  width: 52px; height: 52px; border-radius: 12px;\n  border: 2px solid transparent; background: #e8eaed; overflow: hidden;\n  transition: border-color .15s;\n}\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n\n.ms-ppl-strip-remove-btn {\n  display: none; position: absolute; top: -6px; right: -6px;\n  width: 18px; height: 18px; border-radius: 50%;\n  background: #fff; border: 1.5px solid #d1d5db;\n  font-size: 11px; color: #5f6368; line-height: 1;\n  cursor: pointer; outline: none; place-items: center;\n}\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n\n.ms-ppl-strip-arrow {\n  width: 28px; height: 28px; border-radius: 50%;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-size: 18px; display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n/* ══════════════════════════════════════\n   Context Menu\n══════════════════════════════════════ */\n.ms-ctx-menu {\n  display: none; position: fixed;\n  background: #fff; border-radius: 12px;\n  box-shadow: 0 8px 28px rgba(0,0,0,.16);\n  border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px;\n}\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item {\n  display: block; width: 100%; text-align: left; padding: 9px 14px;\n  border: none; background: transparent; border-radius: 8px;\n  cursor: pointer;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; transition: background .12s;\n}\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n/* ══════════════════════════════════════\n   Media Grid\n══════════════════════════════════════ */\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid {\n  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;\n}\n.ms-ppl-media-item {\n  border-radius: 12px; overflow: hidden; background: #f0f0f0;\n  cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee;\n}\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb {\n  width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed;\n}\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge {\n  position: absolute; top: 6px; left: 6px;\n  background: rgba(0,0,0,.55); color: #fff;\n  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;\n  text-transform: uppercase; letter-spacing: .06em;\n}\n.ms-ppl-media-dur {\n  position: absolute; bottom: 5px; right: 7px;\n  background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;\n}\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title {\n  font-size: 12px; font-weight: 600; color: #202124;\n  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;\n}\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n/* ══════════════════════════════════════\n   Modals\n══════════════════════════════════════ */\n.ms-modal-overlay {\n  display: none; position: fixed; inset: 0;\n  background: rgba(0,0,0,.3); z-index: 999; place-items: center;\n}\n.ms-modal-overlay.show { display: grid; }\n.ms-modal {\n  background: #fff; border-radius: 20px; padding: 30px 34px;\n  max-width: 380px; width: 90%;\n  box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center;\n}\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n\n/* Merge Modal */\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face {\n  width: 72px; height: 72px; border-radius: 14px;\n  background: #e8eaed; flex-shrink: 0; overflow: hidden;\n}\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap {\n  display: flex; align-items: center; gap: 10px;\n  border: 1.5px solid #d1d5db; border-radius: 12px;\n  padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s;\n}\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img {\n  width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed;\n  border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s;\n}\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Silhouette */\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n?>\n<script>\n(function () {\n  \'use strict\';\n\n  if (window.location.pathname.indexOf(\'people\') === -1) return;\n\n  /* ══════════════════════════════════════\n     Constants & Silhouette\n  ══════════════════════════════════════ */\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  /* ══════════════════════════════════════\n     MOCK DATA\n  ══════════════════════════════════════ */\n  var MOCK_PEOPLE = [\n    {\n      id: \'p001\',\n      name: \'許光漢 Greg Hsu\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\',\n      isNew: true, isStarred: false,\n      aliases: [\'Greg Hsu\', \'許光漢\'],\n      role: \'吳明漢（恐同直男警察）\',\n      notes: \'生日：1990年10月31日，出生於台灣台北。演員、模特兒。以《想見你》（2019）主演雙重角色爆紅，並以《陽光普照》入圍金馬獎。2022年成為 Fendi 品牌大使。\',\n      addedAt: new Date(\'2026-01-01\'), lastViewed: new Date(\'2026-05-10\'),\n      face_members: [\n        { id: \'fm-a1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-a2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-a3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-a4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m1\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\', duration: 129 }]\n    },\n    {\n      id: \'p002\',\n      name: \'林柏宏 Austin Lin\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\',\n      isNew: true, isStarred: false,\n      aliases: [\'Austin Lin\', \'林柏宏\'],\n      role: \'毛邦羽（同志冤鬼）\',\n      notes: \'生日：1988年1月27日，出生於台南，演員、歌手與電視節目主持人。2016年以《六弄咖啡館》奪得第53屆金馬獎最佳男配角。身高177cm，畢業於國立台灣師範大學化學系。\',\n      addedAt: new Date(\'2026-01-02\'), lastViewed: new Date(\'2026-05-09\'),\n      face_members: [\n        { id: \'fm-b1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\' },\n        { id: \'fm-b2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpqMwGNX.jpg\' },\n        { id: \'fm-b3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' },\n        { id: \'fm-b4\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20210124_%E7%82%8E%E4%BA%9E%E7%B6%B8_%E6%91%A9%E7%99%BB%E5%8E%9F%E5%A7%8B%E4%BA%BA%E9%AB%98%E9%9B%84%E7%B0%BD%E5%94%B1%E6%9C%83.jpg\' }\n      ],\n      media: [{ id: \'m2\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/62014faf0355b5e87f77dabb499c064a.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p003\',\n      name: \'王淨 Gingle Wang\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Gingle Wang\', \'王淨\', \'菌菌\'],\n      role: \'林子晴（女警察）\',\n      notes: \'生日：1998年2月7日，出生於台北，女演員，筆名菌菌。2020年以《返校》獲頒第22屆台北電影獎最佳女主角。同時也是作家，國中時期即出版小說。\',\n      addedAt: new Date(\'2026-01-03\'), lastViewed: new Date(\'2026-05-08\'),\n      face_members: [\n        { id: \'fm-c1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' },\n        { id: \'fm-c2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m3\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p004\',\n      name: \'蔡振南 Tsai Chen-Nan\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsai Chen-Nan\', \'蔡振南\'],\n      role: \'林孝遠\',\n      notes: \'生日：1954年7月26日，台灣演員、歌手、詞曲作家，三金（金馬獎、金曲獎、金鐘獎）得主。資深演員，曾以《悲情城市》踏入影壇，代表作包括《多桑》、《花甲男孩轉大人》等，以「爸爸專業戶」著稱。\',\n      addedAt: new Date(\'2026-01-04\'), lastViewed: new Date(\'2026-05-07\'),\n      face_members: [\n        { id: \'fm-d1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\' },\n        { id: \'fm-d2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/8380772-scaled.jpg\' },\n        { id: \'fm-d3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/20230302001174.jpg\' }\n      ],\n      media: [{ id: \'m4\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/bcc6ac00-f09a-11ed-b7df-08cc79ab0969.jpg\', duration: 129 }]\n    },\n    {\n      id: \'p005\',\n      name: \'庹宗華 Tsung-hua Tuo\',\n      isAudrey: false,\n      thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\',\n      isNew: false, isStarred: false,\n      aliases: [\'Tsung-hua Tuo\', \'庹宗華\'],\n      role: \'毛正國（毛毛的爸爸）\',\n      notes: \'生日：1962年10月10日，出生於台北，演員、歌手，曾獲金鐘獎最佳男主角獎。童星出身，以《報告班長》系列聲名大噪，2005年憑《孤戀花》奪得第40屆金鐘獎戲劇類男主角獎。\',\n      addedAt: new Date(\'2026-01-05\'), lastViewed: new Date(\'2026-05-06\'),\n      face_members: [\n        { id: \'fm-e1\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\' },\n        { id: \'fm-e2\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/%E3%80%8A%E4%BB%96%E5%B9%B4%E5%A5%B9%E6%97%A5%E3%80%8B%E8%87%BA%E5%8C%97%E9%A6%96%E6%98%A0%E5%85%B8%E7%A6%AE%EF%BC%8D%E8%A8%B1%E5%85%89%E6%BC%A2_01.png\' },\n        { id: \'fm-e3\', isAudrey: false, thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/images.jpg\' }\n      ],\n      media: [{ id: \'m5\', title: \'關於我和鬼變成家人的那件事\', subtitle: \'2023・台灣電影\', type: \'video\', thumb: \'https://www.accusys.com.tw/wp-content/uploads/2026/05/phpmvxUuG.jpg\', duration: 129 }]\n    }\n  ];\n\n  /* ══════════════════════════════════════\n     待定人物陣列\n  ══════════════════════════════════════ */\n  var PENDING_PEOPLE = [];\n\n  /* ══════════════════════════════════════\n     State\n  ══════════════════════════════════════ */\n  var state = {\n    showStarred: false,\n    searchQuery: \'\',\n    sortMode: \'time\',\n    currentPerson: null,\n    editMode: false,\n    currentAliases: [],\n    ctxFmId: null,\n    mergeSource: null,\n    mergeTarget: null,\n    mergeFromDetail: false,\n    ctxCardPerson: null\n  };\n\n  /* ══════════════════════════════════════\n     Helpers\n  ══════════════════════════════════════ */\n  function makeImg(src, fallback) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { this.parentNode.innerHTML = fallback || SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) {\n      v.classList.toggle(\'active\', v.id === id);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Factory（已知 + 待定共用）\n  ══════════════════════════════════════ */\n  function makePersonCard(person, isPending) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\');\n    card.dataset.personId = person.id;\n\n    var imgWrap = document.createElement(\'div\');\n    imgWrap.className = \'ms-ppl-face-img-wrap\';\n\n    var src = person.thumb || null;\n    if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n    if (!isPending && person.isNew) {\n      var newBadge = document.createElement(\'div\');\n      newBadge.className = \'ms-ppl-face-new\';\n      newBadge.textContent = \'New\';\n      imgWrap.appendChild(newBadge);\n    }\n\n    var starBadge = document.createElement(\'div\');\n    starBadge.className = \'ms-ppl-card-star\';\n    starBadge.textContent = \'★\';\n    imgWrap.appendChild(starBadge);\n\n    card.appendChild(imgWrap);\n\n    var nameEl = document.createElement(\'div\');\n    nameEl.className = \'ms-ppl-face-name\';\n    nameEl.textContent = person.name || \'\';\n    card.appendChild(nameEl);\n\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (isPending) {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showPendingCtxMenu(e.clientX, e.clientY);\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation();\n        state.ctxCardPerson = person;\n        showCardCtxMenu(e.clientX, e.clientY, person);\n      });\n    }\n\n    return card;\n  }\n\n  /* ══════════════════════════════════════\n     Grid Renders\n  ══════════════════════════════════════ */\n  function renderGrid() {\n    renderKnownGrid();\n    renderPendingGrid();\n  }\n\n  function getFilteredPeople() {\n    var list = MOCK_PEOPLE.slice();\n    if (state.showStarred) {\n      list = list.filter(function (p) { return p.isStarred; });\n    }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) {\n        return (p.name || \'\').toLowerCase().indexOf(q) !== -1 ||\n               (p.aliases || []).some(function (a) { return a.toLowerCase().indexOf(q) !== -1; });\n      });\n    }\n    if (state.sortMode === \'recent\') {\n      list.sort(function (a, b) { return b.lastViewed - a.lastViewed; });\n    } else {\n      list.sort(function (a, b) { return b.addedAt - a.addedAt; });\n    }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\';\n      return;\n    }\n    list.forEach(function (person) { grid.appendChild(makePersonCard(person, false)); });\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!PENDING_PEOPLE.length) {\n      grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">目前沒有待定人物</div>\';\n      return;\n    }\n    PENDING_PEOPLE.forEach(function (person) { grid.appendChild(makePersonCard(person, true)); });\n  }\n\n  /* ══════════════════════════════════════\n     Star helpers\n  ══════════════════════════════════════ */\n  function toggleStar(person) {\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n  }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id);\n      if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Card Context Menu\n  ══════════════════════════════════════ */\n  function showCardCtxMenu(x, y, person) {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (!menu) return;\n    var starItem = document.getElementById(\'msPplCardCtxStar\');\n    if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n    menu.classList.add(\'show\');\n    var mw = 160, mh = 90;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hideCardCtxMenu() {\n    var menu = document.getElementById(\'msPplCardCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  function showPendingCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 140, mh = 50;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n\n  function hidePendingCtxMenu() {\n    var menu = document.getElementById(\'msPplPendingCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu();\n  });\n\n  var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\');\n  if (pendingCtxMerge) {\n    pendingCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hidePendingCtxMenu();\n    });\n  }\n\n  var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n  if (pendingCtxPromote) {\n    pendingCtxPromote.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      var person = state.ctxCardPerson;\n      /* 從 PENDING_PEOPLE 移除，推入 MOCK_PEOPLE */\n      var idx = PENDING_PEOPLE.findIndex(function (p) { return p.id === person.id; });\n      if (idx !== -1) PENDING_PEOPLE.splice(idx, 1);\n      person.isNew = true;\n      MOCK_PEOPLE.unshift(person);\n      state.ctxCardPerson = null;\n      hidePendingCtxMenu();\n      /* 直接開 detail 編輯模式 */\n      openDetail(person);\n      setTimeout(function () {\n        setVal(\'msPplEditName\', person.name);\n        setVal(\'msPplEditRole\', person.role);\n        setVal(\'msPplEditNotes\', person.notes);\n        state.currentAliases = (person.aliases || []).slice();\n        renderAliases();\n        syncDetailStarBtns(person);\n        setEditMode(true);\n        renderFaceStrip(person);\n      }, 50);\n    });\n  }\n\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu();\n  });\n\n  var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\');\n  if (cardCtxMerge) {\n    cardCtxMerge.addEventListener(\'click\', function () {\n      if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false);\n      hideCardCtxMenu();\n    });\n  }\n\n  var cardCtxStar = document.getElementById(\'msPplCardCtxStar\');\n  if (cardCtxStar) {\n    cardCtxStar.addEventListener(\'click\', function () {\n      if (!state.ctxCardPerson) return;\n      toggleStar(state.ctxCardPerson);\n      hideCardCtxMenu();\n      renderGrid();\n    });\n  }\n\n  /* ── Star Toggle（查看重要人物）── */\n  var starToggleBtn   = document.getElementById(\'msPplStarToggleBtn\');\n  var starToggleLabel = document.getElementById(\'msPplStarToggleLabel\');\n  var sectionTitle    = document.getElementById(\'msPplSectionTitle\');\n\n  if (starToggleBtn) {\n    starToggleBtn.addEventListener(\'click\', function () {\n      state.showStarred = !state.showStarred;\n      starToggleBtn.classList.toggle(\'active\', state.showStarred);\n      var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n      if (state.showStarred) {\n        starToggleLabel.textContent = \'查看所有人物\';\n        if (starIcon) starIcon.style.display = \'none\';\n        sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n      } else {\n        starToggleLabel.textContent = \'查看重要人物\';\n        if (starIcon) starIcon.style.display = \'\';\n        sectionTitle.textContent = \'已知人物：\';\n      }\n      renderGrid();\n    });\n  }\n\n  /* ── Search ── */\n  var searchInput = document.getElementById(\'msPplSearchInput\');\n  if (searchInput) {\n    searchInput.addEventListener(\'input\', function () {\n      state.searchQuery = this.value.trim();\n      renderGrid();\n    });\n  }\n\n  /* ── Refresh ── */\n  var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n  if (refreshBtn) {\n    refreshBtn.addEventListener(\'click\', function () {\n      state.searchQuery = \'\';\n      if (searchInput) searchInput.value = \'\';\n      renderGrid();\n    });\n  }\n\n  /* ── Sort ── */\n  var sortBtn   = document.getElementById(\'msPplSortBtn\');\n  var sortPanel = document.getElementById(\'msPplSortPanel\');\n  if (sortBtn && sortPanel) {\n    sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); });\n    document.addEventListener(\'click\', function (e) {\n      if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\');\n    });\n  }\n  document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) {\n    radio.addEventListener(\'change\', function () {\n      state.sortMode = this.value;\n      sortPanel.classList.remove(\'show\');\n      renderGrid();\n    });\n  });\n\n  /* ══════════════════════════════════════\n     Detail View\n  ══════════════════════════════════════ */\n  function openDetail(person) {\n    state.currentPerson = person;\n    state.editMode = false;\n    person.lastViewed = new Date();\n    renderDetailView(person);\n    showView(\'msPplViewDetail\');\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) {\n      if (person.name) {\n        nameEl.textContent = person.name;\n        nameEl.classList.remove(\'placeholder\');\n      } else {\n        nameEl.textContent = \'加入人名\';\n        nameEl.classList.add(\'placeholder\');\n      }\n    }\n\n    syncDetailStarBtns(person);\n\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) {\n      aliasesEl.innerHTML = \'\';\n      (person.aliases || []).forEach(function (a) {\n        var chip = document.createElement(\'span\');\n        chip.className = \'ms-ppl-alias-chip\';\n        chip.textContent = a;\n        aliasesEl.appendChild(chip);\n      });\n    }\n\n    setText(\'msPplDetailRole\', person.role);\n    setText(\'msPplDetailNotes\', person.notes);\n\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      var src = person.thumb || null;\n      if (src) { avatar.appendChild(makeImg(src)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    renderFaceStrip(person);\n    renderMediaGrid(person.media || []);\n\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) {\n      label.textContent = (person.media && person.media.length)\n        ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片照片，共 \' + person.media.length + \' 個檔案：\'\n        : \'\';\n    }\n\n    setEditMode(false);\n  }\n\n  /* ── Face Strip ── */\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\');\n    if (!strip) return;\n    strip.innerHTML = \'\';\n    var members = person.face_members || [];\n    members.slice(1).forEach(function (fm) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-strip-face\';\n      el.dataset.fmId = fm.id;\n\n      var imgBox = document.createElement(\'div\');\n      imgBox.className = \'ms-ppl-strip-face-img\';\n      var src = fm.thumb || null;\n      if (src) { imgBox.appendChild(makeImg(src)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      el.appendChild(imgBox);\n\n      var removeBtn = document.createElement(\'button\');\n      removeBtn.className = \'ms-ppl-strip-remove-btn\';\n      removeBtn.textContent = \'×\';\n      removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) {\n        e.stopPropagation();\n        state.ctxFmId = fm.id;\n        showModal(\'msPplRemoveModal\');\n      });\n      el.appendChild(removeBtn);\n\n      el.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault();\n        state.ctxFmId = fm.id;\n        showCtxMenu(e.clientX, e.clientY);\n      });\n\n      strip.appendChild(el);\n    });\n\n    var wrap = document.getElementById(\'msPplViewDetail\');\n    if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  /* ── Edit Mode ── */\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\');\n    var editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\';\n    if (editEl) editEl.style.display = on ? \'\' : \'none\';\n\n    var detail = document.getElementById(\'msPplViewDetail\');\n    if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) {\n        toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\';\n        toggle.style.color = \'#1a56db\';\n      } else {\n        toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n        toggle.style.color = \'\';\n      }\n    }\n  }\n\n  var editToggle = document.getElementById(\'msPplEditToggle\');\n  if (editToggle) {\n    editToggle.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      if (state.editMode) { renderDetailView(state.currentPerson); return; }\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n    });\n  }\n\n  var saveBtn = document.getElementById(\'msPplSaveBtn\');\n  if (saveBtn) {\n    saveBtn.addEventListener(\'click\', function () {\n      var p = state.currentPerson;\n      if (!p) return;\n      p.name   = getVal(\'msPplEditName\') || p.name;\n      p.role   = getVal(\'msPplEditRole\');\n      p.notes  = getVal(\'msPplEditNotes\');\n      p.aliases = state.currentAliases.slice();\n      renderDetailView(p);\n      renderGrid();\n    });\n  }\n\n  var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n  if (cancelBtn) {\n    cancelBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) renderDetailView(state.currentPerson);\n      else setEditMode(false);\n    });\n  }\n\n  /* ── Aliases ── */\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\');\n    if (!wrap) return;\n    wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\');\n      tag.className = \'ms-ppl-alias-tag\';\n      tag.innerHTML = alias + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () {\n        state.currentAliases.splice(Number(this.dataset.idx), 1);\n        renderAliases();\n      });\n      wrap.appendChild(tag);\n    });\n  }\n\n  var addAliasBtn      = document.getElementById(\'msPplAddAlias\');\n  var aliasInlineWrap  = document.getElementById(\'msPplAliasInlineWrap\');\n  var aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n\n  if (addAliasBtn) {\n    addAliasBtn.addEventListener(\'click\', function () {\n      if (!aliasInlineWrap || !aliasInlineInput) return;\n      aliasInlineWrap.style.display = \'flex\';\n      aliasInlineInput.value = \'\';\n      aliasInlineInput.focus();\n      addAliasBtn.style.display = \'none\';\n    });\n  }\n\n  if (aliasInlineInput) {\n    aliasInlineInput.addEventListener(\'keydown\', function (e) {\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        var val = aliasInlineInput.value.trim();\n        if (val) { state.currentAliases.push(val); renderAliases(); }\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n      if (e.key === \'Escape\') {\n        aliasInlineWrap.style.display = \'none\';\n        aliasInlineInput.value = \'\';\n        if (addAliasBtn) addAliasBtn.style.display = \'\';\n      }\n    });\n    aliasInlineInput.addEventListener(\'blur\', function () {\n      var val = aliasInlineInput.value.trim();\n      if (val) { state.currentAliases.push(val); renderAliases(); }\n      aliasInlineWrap.style.display = \'none\';\n      aliasInlineInput.value = \'\';\n      if (addAliasBtn) addAliasBtn.style.display = \'\';\n    });\n  }\n\n  /* ── Star (detail) ── */\n  [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n    var btn = document.getElementById(id);\n    if (!btn) return;\n    btn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      toggleStar(state.currentPerson);\n      renderGrid();\n    });\n  });\n\n  /* ── 新增標籤 ── */\n  var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n  if (addTagBtn) {\n    addTagBtn.addEventListener(\'click\', function () {\n      if (!state.currentPerson) return;\n      var p = state.currentPerson;\n      setVal(\'msPplEditName\', p.name);\n      setVal(\'msPplEditRole\', p.role);\n      setVal(\'msPplEditNotes\', p.notes);\n      state.currentAliases = (p.aliases || []).slice();\n      renderAliases();\n      syncDetailStarBtns(p);\n      setEditMode(true);\n      renderFaceStrip(p);\n      setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n    });\n  }\n\n  /* ── Back ── */\n  var backBtn = document.getElementById(\'msPplBackBtn\');\n  if (backBtn) {\n    backBtn.addEventListener(\'click\', function () {\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  /* ── Strip arrow ── */\n  var stripNext = document.getElementById(\'msPplStripNext\');\n  if (stripNext) {\n    stripNext.addEventListener(\'click\', function () {\n      var strip = document.getElementById(\'msPplFaceStrip\');\n      if (strip) strip.scrollBy({ left: 200, behavior: \'smooth\' });\n    });\n  }\n\n  /* ── Media Grid ── */\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\');\n      el.className = \'ms-ppl-media-item\';\n      var dur = item.duration\n        ? \'<span class=\"ms-ppl-media-dur\">\' + Math.floor(item.duration / 60) + \':\' + String(item.duration % 60).padStart(2, \'0\') + \'</span>\'\n        : \'\';\n      var thumbHtml = item.thumb\n        ? \'<img src=\"\' + item.thumb + \'\" onerror=\"this.parentNode.style.background=\\\'#e8eaed\\\'\">\'\n        : SILHOUETTE_SVG;\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\">\' + thumbHtml +\n        \'<span class=\"ms-ppl-media-badge\">\' + (item.type === \'video\' ? \'VIDEO\' : \'PHOTO\') + \'</span>\' + dur +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\">\' +\n        \'<div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div>\' +\n        \'<div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div>\' +\n        \'</div>\';\n      grid.appendChild(el);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Context Menu（face strip 右鍵）\n  ══════════════════════════════════════ */\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (!menu) return;\n    menu.classList.add(\'show\');\n    var mw = 150, mh = 80;\n    var left = (x + mw > window.innerWidth) ? x - mw : x;\n    var top  = (y + mh > window.innerHeight) ? y - mh : y;\n    menu.style.left = left + \'px\';\n    menu.style.top  = top  + \'px\';\n  }\n  function hideCtxMenu() {\n    var menu = document.getElementById(\'msPplCtxMenu\');\n    if (menu) menu.classList.remove(\'show\');\n  }\n  document.addEventListener(\'click\', function (e) {\n    if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu();\n  });\n\n  /* 不是此人物 → 開移除 modal */\n  var ctxNotThis = document.getElementById(\'msPplCtxNotThis\');\n  if (ctxNotThis) {\n    ctxNotThis.addEventListener(\'click\', function () {\n      showModal(\'msPplRemoveModal\');\n      hideCtxMenu();\n    });\n  }\n\n  /* 另建人物 */\n  var ctxSplit = document.getElementById(\'msPplCtxSplit\');\n  if (ctxSplit) {\n    ctxSplit.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; });\n          var newPerson = {\n            id: \'p-new-\' + Date.now(),\n            name: \'\', isAudrey: fm.isAudrey, thumb: fm.thumb || null,\n            isNew: true, isStarred: false, aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(), lastViewed: new Date(),\n            face_members: [fm], media: []\n          };\n          MOCK_PEOPLE.unshift(newPerson);\n          openDetail(newPerson);\n          setTimeout(function () { if (editToggle) editToggle.click(); }, 100);\n        }\n        state.ctxFmId = null;\n      }\n      hideCtxMenu();\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Remove Face Modal\n     → 移至待定人物（不直接刪除）\n  ══════════════════════════════════════ */\n  var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n  if (removeConfirm) {\n    removeConfirm.addEventListener(\'click\', function () {\n      if (state.ctxFmId && state.currentPerson) {\n        var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n        if (fm) {\n          /* 從目前人物 face_members 移除 */\n          state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) {\n            return f.id !== state.ctxFmId;\n          });\n\n          /* 更新主圖 */\n          if (state.currentPerson.face_members.length > 0) {\n            state.currentPerson.thumb = state.currentPerson.face_members[0].thumb || null;\n          } else {\n            state.currentPerson.thumb = null;\n          }\n\n          /* 建立待定人物 */\n          var pendingPerson = {\n            id: \'pending-\' + Date.now(),\n            name: \'\',\n            thumb: fm.thumb || null,\n            isNew: false,\n            isStarred: false,\n            aliases: [],\n            role: \'\', notes: \'\',\n            addedAt: new Date(),\n            lastViewed: new Date(),\n            face_members: [fm],\n            media: []\n          };\n          PENDING_PEOPLE.unshift(pendingPerson);\n\n          state.ctxFmId = null;\n          renderDetailView(state.currentPerson);\n          /* 同步更新 list 的待定 grid（不切換頁面）*/\n          renderPendingGrid();\n        }\n      }\n      hideModal(\'msPplRemoveModal\');\n    });\n  }\n\n  var removeCancel = document.getElementById(\'msPplRemoveCancel\');\n  if (removeCancel) {\n    removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); });\n  }\n\n  /* ══════════════════════════════════════\n     Merge Modal\n  ══════════════════════════════════════ */\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource   = sourcePerson;\n    state.mergeTarget   = null;\n    state.mergeFromDetail = fromDetail;\n\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) {\n      triggerFaceEl.innerHTML = \'\';\n      var src = sourcePerson.thumb || null;\n      if (src) { triggerFaceEl.appendChild(makeImg(src)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; }\n    }\n\n    var searchEl = document.getElementById(\'msMergeSearchInput\');\n    if (searchEl) searchEl.value = \'\';\n\n    renderMergeGrid(\'\');\n    showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\');\n    if (!grid) return;\n    grid.innerHTML = \'\';\n\n    /* 合併候選：已知 + 待定人物，排除 source */\n    var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n    var list = allPeople.filter(function (p) {\n      if (state.mergeSource && p.id === state.mergeSource.id) return false;\n      if (!query) return true;\n      var q = query.toLowerCase();\n      return (p.name || \'\').toLowerCase().indexOf(q) !== -1;\n    });\n\n    list.forEach(function (person) {\n      var card = document.createElement(\'div\');\n      card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\');\n      card.dataset.personId = person.id;\n\n      var imgWrap = document.createElement(\'div\');\n      imgWrap.className = \'ms-merge-face-img\';\n      var src = person.thumb || null;\n      if (src) { imgWrap.appendChild(makeImg(src)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n\n      var nameEl = document.createElement(\'div\');\n      nameEl.className = \'ms-merge-face-name\';\n      nameEl.textContent = person.name || \'（待定）\';\n\n      card.appendChild(imgWrap);\n      card.appendChild(nameEl);\n\n      card.addEventListener(\'click\', function () {\n        state.mergeTarget = person.id;\n        grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) {\n          c.classList.toggle(\'selected\', c.dataset.personId === person.id);\n        });\n      });\n\n      grid.appendChild(card);\n    });\n  }\n\n  var mergeSearchInput = document.getElementById(\'msMergeSearchInput\');\n  if (mergeSearchInput) {\n    mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); });\n  }\n\n  var mergeCancel = document.getElementById(\'msMergeCancel\');\n  if (mergeCancel) {\n    mergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplMergeModal\');\n      state.mergeTarget = null;\n    });\n  }\n\n  var mergeConfirm = document.getElementById(\'msMergeConfirm\');\n  if (mergeConfirm) {\n    mergeConfirm.addEventListener(\'click\', function () {\n      if (!state.mergeTarget) return;\n      hideModal(\'msPplMergeModal\');\n      showModal(\'msPplConfirmMergeModal\');\n    });\n  }\n\n  var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n  if (confirmMergeOk) {\n    confirmMergeOk.addEventListener(\'click\', function () {\n      if (state.mergeSource && state.mergeTarget) {\n        /* 在已知 + 待定中都找 */\n        var allPeople = MOCK_PEOPLE.concat(PENDING_PEOPLE);\n        var target = allPeople.find(function (p) { return p.id === state.mergeTarget; });\n        var source = state.mergeSource;\n        if (target && source) {\n          target.face_members = (target.face_members || []).concat(source.face_members || []);\n          target.media = (target.media || []).concat(source.media || []);\n          /* 從所在陣列移除 source */\n          var idxKnown = MOCK_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxKnown !== -1) MOCK_PEOPLE.splice(idxKnown, 1);\n          var idxPending = PENDING_PEOPLE.findIndex(function (p) { return p.id === source.id; });\n          if (idxPending !== -1) PENDING_PEOPLE.splice(idxPending, 1);\n        }\n      }\n      hideModal(\'msPplConfirmMergeModal\');\n      state.mergeSource = null;\n      state.mergeTarget = null;\n      renderGrid();\n      showView(\'msPplViewList\');\n    });\n  }\n\n  var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\');\n  if (confirmMergeCancel) {\n    confirmMergeCancel.addEventListener(\'click\', function () {\n      hideModal(\'msPplConfirmMergeModal\');\n      showModal(\'msPplMergeModal\');\n    });\n  }\n\n  /* Face strip + 按鈕 */\n  var stripAddBtn = document.getElementById(\'msPplStripAddBtn\');\n  if (stripAddBtn) {\n    stripAddBtn.addEventListener(\'click\', function () {\n      if (state.currentPerson) openMergeModal(state.currentPerson, true);\n    });\n  }\n\n  /* ══════════════════════════════════════\n     Modal helpers\n  ══════════════════════════════════════ */\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n\n  document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) {\n    o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); });\n  });\n\n  /* ══════════════════════════════════════\n     DOM Helpers\n  ══════════════════════════════════════ */\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v)  { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id)     { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  /* ══════════════════════════════════════\n     Init\n  ══════════════════════════════════════ */\n  function init() {\n    if (document.getElementById(\'msPplUnassignedGrid\')) renderGrid();\n  }\n\n  if (document.readyState === \'loading\') {\n    document.addEventListener(\'DOMContentLoaded\', init);\n  } else {\n    init();\n  }\n\n})();\n</script>\n<?php\n});\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 07:17:09','2026-05-20 07:17:09','',1359,'https://m5wp.momentry.ddns.net/?p=1586',0,'revision','',0),
(1587,4,'2026-05-20 07:21:16','2026-05-20 07:21:16','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap; transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px; display: flex; align-items: center; gap: 6px;\n}\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0; transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n\n  if (strpos($_SERVER[\'REQUEST_URI\'], \'people\') === false) return;\n\n  $api_url = \'https://m5api.momentry.ddns.net/api/v1/identities?page_size=100\';\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $response = wp_remote_get($api_url, [\n    \'timeout\' => 15,\n    \'headers\' => [\'X-API-Key\' => $api_key],\n  ]);\n\n  $identities_json = \'[]\';\n  if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {\n    $body = json_decode(wp_remote_retrieve_body($response), true);\n    if (!empty($body[\'identities\']) && is_array($body[\'identities\'])) {\n      $identities_json = wp_json_encode($body[\'identities\']);\n    }\n  }\n\n  echo \'<script>window.MS_IDENTITIES = \' . $identities_json . \';</script>\';\n\n});\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 07:21:16','2026-05-20 07:21:16','',1359,'https://m5wp.momentry.ddns.net/?p=1587',0,'revision','',0),
(1588,6,'2026-05-20 07:24:32','2026-05-20 07:24:32','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"document\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-20 07:24:32','2026-05-20 07:24:32','',1356,'https://m5wp.momentry.ddns.net/?p=1588',0,'revision','',0),
(1589,4,'2026-05-20 07:25:58','2026-05-20 07:25:58','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap; transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px; display: flex; align-items: center; gap: 6px;\n}\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0; transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n\n\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 07:25:58','2026-05-20 07:25:58','',1359,'https://m5wp.momentry.ddns.net/?p=1589',0,'revision','',0),
(1590,6,'2026-05-20 07:47:15','2026-05-20 07:47:15','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked> 全部</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\"><input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"photo\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-20 07:47:15','2026-05-20 07:47:15','',1356,'https://m5wp.momentry.ddns.net/?p=1590',0,'revision','',0),
(1591,4,'2026-05-20 08:40:33','2026-05-20 08:40:33','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n  <!-- 頁碼 -->\n  <div class=\"ms-ppl-pagination\" id=\"msPplPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap; transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px; display: flex; align-items: center; gap: 6px;\n}\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0; transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 頁碼 ── */\n.ms-ppl-pagination {\n  display: flex; align-items: center; gap: 6px;\n  flex-wrap: wrap; margin-top: 36px; padding-bottom: 24px;\n}\n.ms-ppl-page-btn {\n  min-width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; padding: 0 10px;\n  transition: background .15s, border-color .15s;\n}\n.ms-ppl-page-btn:hover { background: #f3f4f6; }\n.ms-ppl-page-btn.active { background: #202124; color: #fff; border-color: #202124; cursor: default; }\n.ms-ppl-page-dots { font-size: 13px; color: #9aa0a6; padding: 0 4px; }\n</style>\n\n<?php\nremove_filter(\'the_content\', \'wptexturize\');\nremove_filter(\'the_content\', \'wpautop\');\n\nadd_action(\'wp_footer\', function() {\n\n  if (strpos($_SERVER[\'REQUEST_URI\'], \'people\') === false) return;\n\n  $api_url = \'https://m5api.momentry.ddns.net/api/v1/identities?page_size=100\';\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $response = wp_remote_get($api_url, [\n    \'timeout\' => 15,\n    \'headers\' => [\'X-API-Key\' => $api_key],\n  ]);\n\n  $identities_json = \'[]\';\n  if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {\n    $body = json_decode(wp_remote_retrieve_body($response), true);\n    if (!empty($body[\'identities\']) && is_array($body[\'identities\'])) {\n      $identities_json = wp_json_encode($body[\'identities\']);\n    }\n  }\n\n  echo \'<script>window.MS_IDENTITIES = \' . $identities_json . \';</script>\';\n\n});\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 08:40:33','2026-05-20 08:40:33','',1359,'https://m5wp.momentry.ddns.net/?p=1591',0,'revision','',0),
(1592,4,'2026-05-20 08:45:15','2026-05-20 08:45:15','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n  <!-- 頁碼 -->\n  <div class=\"ms-ppl-pagination\" id=\"msPplPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap; transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px; display: flex; align-items: center; gap: 6px;\n}\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0; transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 頁碼 ── */\n.ms-ppl-pagination {\n  display: flex; align-items: center; gap: 6px;\n  flex-wrap: wrap; margin-top: 36px; padding-bottom: 24px;\n}\n.ms-ppl-page-btn {\n  min-width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; padding: 0 10px;\n  transition: background .15s, border-color .15s;\n}\n.ms-ppl-page-btn:hover { background: #f3f4f6; }\n.ms-ppl-page-btn.active { background: #202124; color: #fff; border-color: #202124; cursor: default; }\n.ms-ppl-page-dots { font-size: 13px; color: #9aa0a6; padding: 0 4px; }\n</style>\n\n\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 08:45:15','2026-05-20 08:45:15','',1359,'https://m5wp.momentry.ddns.net/?p=1592',0,'revision','',0),
(1593,4,'2026-05-20 08:47:56','2026-05-20 08:47:56','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <!-- Toolbar -->\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div class=\"ms-ppl-pagination\" id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div class=\"ms-ppl-pagination\" id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <!-- View mode -->\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Edit mode -->\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 8px 16px; border-radius: 10px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; white-space: nowrap; transition: background .15s;\n}\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn {\n  width: 36px; height: 36px; border-radius: 8px;\n  border: 1.5px solid #d1d5db; background: #fff;\n  display: grid; place-items: center;\n  cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s;\n}\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel {\n  display: none; position: absolute; right: 0; top: 44px;\n  background: #fff; border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,.12);\n  border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px;\n}\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title {\n  font-size: 12px; font-weight: 700; color: #202124;\n  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px;\n}\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap {\n  display: flex; align-items: center; gap: 8px;\n  border: 1.5px solid #d1d5db; border-radius: 10px;\n  padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s;\n}\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input {\n  border: none; outline: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; color: #202124; width: 100%;\n}\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar {\n  display: flex; align-items: center; gap: 10px;\n  margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible;\n}\n.ms-ppl-section-title {\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 600; color: #202124;\n  margin: 0 0 20px; display: flex; align-items: center; gap: 6px;\n}\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card {\n  width: 120px; display: flex; flex-direction: column;\n  align-items: center; gap: 8px; cursor: pointer; position: relative;\n}\n.ms-ppl-face-img-wrap {\n  width: 120px; height: 120px; border-radius: 20px;\n  overflow: hidden; background: #f0f0f0;\n  transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative;\n}\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn {\n  position: absolute; top: 0; right: 0;\n  display: inline-flex; align-items: center;\n  border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13.5px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none; padding: 4px 0; transition: color .15s;\n}\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 頁碼 ── */\n.ms-ppl-pagination {\n  display: flex; align-items: center; gap: 6px;\n  flex-wrap: wrap; margin-top: 28px; padding-bottom: 8px;\n}\n.ms-ppl-page-btn {\n  width: 36px; height: 36px; border-radius: 50%;\n  border: 1.5px solid #e8eaed; background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px; font-weight: 500; color: #202124;\n  cursor: pointer; outline: none; padding: 0;\n  display: grid; place-items: center;\n  transition: background .15s, border-color .15s;\n}\n.ms-ppl-page-btn:hover { background: #f3f4f6; border-color: #d1d5db; }\n.ms-ppl-page-btn.active { background: #202124; color: #fff; border-color: #202124; cursor: default; }\n.ms-ppl-page-btn.arrow { font-size: 16px; color: #5f6368; border-color: #e8eaed; }\n.ms-ppl-page-btn.arrow:hover { background: #f3f4f6; color: #202124; }\n.ms-ppl-page-dots { font-size: 13px; color: #9aa0a6; padding: 0 2px; line-height: 36px; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 08:47:56','2026-05-20 08:47:56','',1359,'https://m5wp.momentry.ddns.net/?p=1593',0,'revision','',0),
(1594,4,'2026-05-20 09:00:34','2026-05-20 09:00:34','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 09:00:34','2026-05-20 09:00:34','',1359,'https://m5wp.momentry.ddns.net/?p=1594',0,'revision','',0),
(1595,4,'2026-05-20 09:06:57','2026-05-20 09:06:57','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Tab 切換 -->\n  <div class=\"ms-ppl-tabs\">\n    <button class=\"ms-ppl-tab active\" id=\"msPplTabKnown\">已知人物</button>\n    <button class=\"ms-ppl-tab\" id=\"msPplTabPending\">待定人物</button>\n  </div>\n\n  <!-- 已知人物 panel -->\n  <div id=\"msPplPanelKnown\" class=\"ms-ppl-panel active\">\n    <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  </div>\n\n  <!-- 待定人物 panel -->\n  <div id=\"msPplPanelPending\" class=\"ms-ppl-panel\">\n    <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  </div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── Tab ── */\n.ms-ppl-tabs {\n  display: flex; gap: 0;\n  border-bottom: 1.5px solid #e8eaed;\n  margin-bottom: 24px;\n}\n.ms-ppl-tab {\n  padding: 10px 20px; border: none; background: transparent;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 14px; font-weight: 500; color: #5f6368;\n  cursor: pointer; outline: none;\n  border-bottom: 2.5px solid transparent;\n  margin-bottom: -1.5px;\n  transition: color .15s, border-color .15s;\n}\n.ms-ppl-tab:hover { color: #202124; }\n.ms-ppl-tab.active { color: #202124; border-bottom-color: #202124; font-weight: 600; }\n\n.ms-ppl-panel { display: none; }\n.ms-ppl-panel.active { display: block; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 09:06:57','2026-05-20 09:06:57','',1359,'https://m5wp.momentry.ddns.net/?p=1595',0,'revision','',0),
(1596,4,'2026-05-20 09:08:41','2026-05-20 09:08:41','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-20 09:08:41','2026-05-20 09:08:41','',1359,'https://m5wp.momentry.ddns.net/?p=1596',0,'revision','',0),
(1597,1,'2026-05-20 11:46:30','2026-05-20 11:46:30','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Logs','','inherit','closed','closed','','1568-revision-v1','','','2026-05-20 11:46:30','2026-05-20 11:46:30','',1568,'https://m5wp.momentry.ddns.net/?p=1597',0,'revision','',0),
(1598,1,'2026-05-20 11:47:00','2026-05-20 11:47:00','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Metrics','','inherit','closed','closed','','1570-revision-v1','','','2026-05-20 11:47:00','2026-05-20 11:47:00','',1570,'https://m5wp.momentry.ddns.net/?p=1598',0,'revision','',0),
(1599,1,'2026-05-20 11:47:17','2026-05-20 11:47:17','<!-- wp:paragraph -->\n<p>Place Holder…</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>等待設計中…</p>\n<!-- /wp:paragraph -->','Evaluation','','inherit','closed','closed','','1573-revision-v1','','','2026-05-20 11:47:17','2026-05-20 11:47:17','',1573,'https://m5wp.momentry.ddns.net/?p=1599',0,'revision','',0),
(1600,1,'2026-05-20 11:58:05','2026-05-20 11:58:05','<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:shortcode -->\n[momentry_api_dashboard_v9]\n<!-- /wp:shortcode --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->','Momentry API console','','publish','closed','closed','','momentry-api-console','','','2026-05-24 01:28:49','2026-05-24 01:28:49','',0,'https://m5wp.momentry.ddns.net/?page_id=1600',0,'page','',0),
(1601,1,'2026-05-20 11:58:02','2026-05-20 11:58:02','<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:shortcode -->\n[momentry_api_console_v9]\n<!-- /wp:shortcode --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->','v9 版本 API Console - DH','','inherit','closed','closed','','1600-revision-v1','','','2026-05-20 11:58:02','2026-05-20 11:58:02','',1600,'https://m5wp.momentry.ddns.net/?p=1601',0,'revision','',0),
(1602,1,'2026-05-20 11:58:54','2026-05-20 11:58:54','<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:shortcode -->\n[momentry_api_console_v9]\n<!-- /wp:shortcode --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->','API Console - DH','','inherit','closed','closed','','1600-revision-v1','','','2026-05-20 11:58:54','2026-05-20 11:58:54','',1600,'https://m5wp.momentry.ddns.net/?p=1602',0,'revision','',0),
(1603,1,'2026-05-20 12:17:30','2026-05-20 12:17:30','<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:shortcode -->\n[momentry_api_dashboard_v9]\n<!-- /wp:shortcode --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->','API Console - DH','','inherit','closed','closed','','1600-revision-v1','','','2026-05-20 12:17:30','2026-05-20 12:17:30','',1600,'https://m5wp.momentry.ddns.net/?p=1603',0,'revision','',0),
(1605,5,'2026-05-20 15:11:12','2026-05-20 15:11:12','<!-- wp:html -->\n<!-- Help Page Content -->\n<div id=\"ms-help-page\">\n  <div class=\"ms-help-shell\">\n    <div class=\"ms-help-top\">\n      <div class=\"ms-help-contact\">\n        <h2>Contact Us</h2>\n\n        <div class=\"ms-help-contact-block\">\n          <div class=\"ms-help-label\">Call us at:</div>\n          <div class=\"ms-help-value\">+886-3-5600258</div>\n        </div>\n\n        <div class=\"ms-help-contact-block\">\n          <div class=\"ms-help-label\">Support:</div>\n          <div class=\"ms-help-value\">support@accusys.com.tw</div>\n        </div>\n      </div>\n\n      <div class=\"ms-help-report\">\n        <h2>問題回報</h2>\n\n        <div class=\"ms-help-report-row\">\n          <textarea id=\"ms-help-report-textarea\" placeholder=\"請輸入您遇到的問題或想回報的內容...\"></textarea>\n          <button id=\"ms-help-send-btn\" type=\"button\">傳送</button>\n        </div>\n\n        <div id=\"ms-help-report-status\" class=\"ms-help-report-status\" aria-live=\"polite\"></div>\n      </div>\n    </div>\n\n    <div class=\"ms-help-divider\"></div>\n\n    <div class=\"ms-help-faq\">\n      <h2>常見問題</h2>\n\n      <div class=\"ms-faq-item\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>歷史記錄怎麼刪除？</span>\n          <span class=\"ms-faq-icon\">＋</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            請到左側歷史記錄列表，將滑鼠移到要刪除的項目上，點擊刪除按鈕即可移除該筆記錄。\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ms-faq-item\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>如何更改用戶名？</span>\n          <span class=\"ms-faq-icon\">＋</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            若目前系統尚未開放前台修改用戶名，請聯繫管理員或支援窗口協助處理。\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ms-faq-item is-open\">\n        <button class=\"ms-faq-q\" type=\"button\">\n          <span>如何查看以前搜索過的視頻？</span>\n          <span class=\"ms-faq-icon\">－</span>\n        </button>\n        <div class=\"ms-faq-a\">\n          <div class=\"ms-faq-a-inner\">\n            您可以從左側歷史記錄中點選先前的搜尋項目，即可查看當時搜尋過的影片與結果內容。\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  /* 只控制右边 help 页面，不碰左边 sidebar */\n  #ms-help-page{\n    width: 100%;\n    min-height: calc(100vh - 40px);\n    background: #ffffff;\n    border: 1px solid #ffffff;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);\n    box-sizing: border-box;\n    padding: 54px 64px 56px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n    color: #6a6a6a;\n  }\n\n  #ms-help-page *{\n    box-sizing: border-box;\n  }\n\n  #ms-help-page .ms-help-shell{\n    width: 100%;\n    max-width: 1040px;\n    margin: 56px auto 0;\n  }\n\n  #ms-help-page .ms-help-top{\n    display: grid;\n    grid-template-columns: 340px 1fr;\n    gap: 74px;\n    align-items: start;\n  }\n\n  #ms-help-page h2{\n    margin: 0 0 22px;\n    font-size: 18px;\n    line-height: 1.2;\n    font-weight: 700;\n    letter-spacing: 1.2px;\n    color: #666666;\n  }\n\n  #ms-help-page .ms-help-contact-block{\n    margin-bottom: 28px;\n  }\n\n  #ms-help-page .ms-help-label{\n    font-size: 16px;\n    line-height: 1.45;\n    font-weight: 500;\n    color: #6d6d6d;\n    letter-spacing: 0.6px;\n  }\n\n  #ms-help-page .ms-help-value{\n    font-size: 16px;\n    line-height: 1.45;\n    font-weight: 500;\n    color: #6d6d6d;\n    letter-spacing: 0.6px;\n  }\n\n  #ms-help-page .ms-help-report-row{\n    display: flex;\n    align-items: flex-end;\n    gap: 18px;\n  }\n\n  #ms-help-page textarea{\n    width: 100%;\n    min-width: 0;\n    height: 150px;\n    resize: none;\n    border: 1px solid #d4d4d4;\n    border-radius: 18px;\n    background: #ffffff;\n    padding: 16px 18px;\n    outline: none;\n    font-size: 14px;\n    color: #666;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n  }\n\n  #ms-help-page textarea:focus{\n    border-color: #c6c6c6;\n  }\n\n  #ms-help-page .ms-help-report button{\n    width: 92px;\n    height: 40px;\n    border-radius: 13px;\n    border: 1px solid #d2d2d2;\n    background: #ffffff;\n    color: #666666;\n    font-size: 14px;\n    font-weight: 600;\n    letter-spacing: 0.8px;\n    cursor: pointer;\n    box-shadow: 0 2px 5px rgba(0,0,0,.08);\n    flex: 0 0 auto;\n  }\n\n  #ms-help-page .ms-help-report button:hover{\n    background: #fafafa;\n  }\n\n  #ms-help-page .ms-help-report button:disabled{\n    opacity: .6;\n    cursor: not-allowed;\n  }\n\n  #ms-help-page .ms-help-report-status{\n    min-height: 20px;\n    margin-top: 10px;\n    font-size: 13px;\n    line-height: 1.4;\n    color: #8a8a8a;\n  }\n\n  #ms-help-page .ms-help-report-status.is-error{\n    color: #c15b5b;\n  }\n\n  #ms-help-page .ms-help-report-status.is-success{\n    color: #5f8a63;\n  }\n\n  #ms-help-page .ms-help-divider{\n    margin: 48px 0 34px;\n    border-top: 1px solid #e8e8e8;\n  }\n\n  #ms-help-page .ms-help-faq h2{\n    margin-bottom: 18px;\n  }\n\n  #ms-help-page .ms-faq-item{\n    border-bottom: 1px solid #ececec;\n  }\n\n  #ms-help-page .ms-faq-q{\n    width: 100%;\n    border: 0;\n    outline: none;\n    box-shadow: none;\n    background: transparent;\n    padding: 14px 10px 14px 0;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-align: left;\n    cursor: pointer;\n    color: #6a6a6a;\n  }\n\n  #ms-help-page .ms-faq-q:focus,\n  #ms-help-page .ms-faq-q:active,\n  #ms-help-page .ms-faq-q:focus-visible{\n    outline: none !important;\n    box-shadow: none !important;\n    border: 0 !important;\n  }\n\n\n  #ms-help-page .ms-faq-q span:first-child{\n    font-size: 16px;\n    line-height: 1.4;\n    font-weight: 700;\n    letter-spacing: 0.4px;\n  }\n\n  #ms-help-page .ms-faq-icon{\n    width: 26px;\n    text-align: center;\n    font-size: 24px;\n    line-height: 1;\n    color: #a2a2a2;\n    flex: 0 0 auto;\n    margin-left: 16px;\n  }\n\n  /* 新增：FAQ 答案区，只补功能，不改整体版面 */\n  #ms-help-page .ms-faq-a{\n    display: none;\n    padding: 0 42px 16px 0;\n  }\n\n  #ms-help-page .ms-faq-item.is-open .ms-faq-a{\n    display: block;\n  }\n\n  #ms-help-page .ms-faq-a-inner{\n    font-size: 14px;\n    line-height: 1.7;\n    color: #7a7a7a;\n    padding-bottom: 2px;\n  }\n\n  @media (max-width: 1200px){\n    #ms-help-page{\n      padding: 42px 40px 48px;\n    }\n\n    #ms-help-page .ms-help-shell{\n      margin-top: 34px;\n    }\n\n    #ms-help-page .ms-help-top{\n      grid-template-columns: 1fr;\n      gap: 34px;\n    }\n  }\n\n  @media (max-width: 768px){\n    #ms-help-page{\n      padding: 28px 22px 36px;\n      min-height: auto;\n    }\n\n    #ms-help-page .ms-help-shell{\n      margin-top: 12px;\n    }\n\n    #ms-help-page h2{\n      font-size: 16px;\n      margin-bottom: 16px;\n    }\n\n    #ms-help-page .ms-help-label,\n    #ms-help-page .ms-help-value{\n      font-size: 14px;\n    }\n\n    #ms-help-page .ms-help-report-row{\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    #ms-help-page .ms-help-report button{\n      width: 100%;\n    }\n\n    #ms-help-page .ms-faq-q span:first-child{\n      font-size: 15px;\n    }\n\n    #ms-help-page .ms-faq-a{\n      padding-right: 0;\n    }\n  }\n</style>\n\n<script>\n  (function(){\n    var root = document.getElementById(\'ms-help-page\');\n    if(!root) return;\n\n    /* =========================\n       FAQ 展开 / 收合\n       ========================= */\n    var items = root.querySelectorAll(\'.ms-faq-item\');\n\n    items.forEach(function(item){\n      var btn = item.querySelector(\'.ms-faq-q\');\n      if(!btn) return;\n\n      btn.addEventListener(\'click\', function(){\n        var opened = item.classList.contains(\'is-open\');\n\n        items.forEach(function(other){\n          other.classList.remove(\'is-open\');\n          var icon = other.querySelector(\'.ms-faq-icon\');\n          if(icon) icon.textContent = \'＋\';\n        });\n\n        if(!opened){\n          item.classList.add(\'is-open\');\n          var thisIcon = item.querySelector(\'.ms-faq-icon\');\n          if(thisIcon) thisIcon.textContent = \'－\';\n        }\n      });\n    });\n\n    /* =========================\n       问题回报：前端送出逻辑\n       ========================= */\n    var textarea = root.querySelector(\'#ms-help-report-textarea\');\n    var sendBtn  = root.querySelector(\'#ms-help-send-btn\');\n    var statusEl = root.querySelector(\'#ms-help-report-status\');\n    var SUPPORT_EMAIL = \'support@accusys.com.tw\';\n    var DRAFT_KEY = \'ms_help_report_draft_v1\';\n\n    if(textarea){\n      try{\n        var savedDraft = localStorage.getItem(DRAFT_KEY);\n        if(savedDraft) textarea.value = savedDraft;\n      }catch(e){}\n\n      textarea.addEventListener(\'input\', function(){\n        try{\n          localStorage.setItem(DRAFT_KEY, textarea.value || \'\');\n        }catch(e){}\n        clearStatus();\n      });\n    }\n\n    if(sendBtn){\n      sendBtn.addEventListener(\'click\', function(){\n        submitReport();\n      });\n    }\n\n    if(textarea){\n      textarea.addEventListener(\'keydown\', function(e){\n        if((e.ctrlKey || e.metaKey) && e.key === \'Enter\'){\n          e.preventDefault();\n          submitReport();\n        }\n      });\n    }\n\n    function submitReport(){\n      if(!textarea || !sendBtn) return;\n\n      var message = (textarea.value || \'\').trim();\n\n      if(!message){\n        setStatus(\'請先輸入問題內容。\', \'error\');\n        textarea.focus();\n        return;\n      }\n\n      sendBtn.disabled = true;\n      setStatus(\'正在開啟郵件程式...\', \'\');\n\n      var subject = \'Momentry Studio 問題回報\';\n      var body =\n        \'您好，以下是我要回報的問題：\\n\\n\' +\n        message + \'\\n\\n\' +\n        \'------------------------------\\n\' +\n        \'頁面：Help Page\\n\' +\n        \'時間：\' + new Date().toLocaleString();\n\n      var mailtoUrl =\n        \'mailto:\' + encodeURIComponent(SUPPORT_EMAIL) +\n        \'?subject=\' + encodeURIComponent(subject) +\n        \'&body=\' + encodeURIComponent(body);\n\n      try{\n        window.location.href = mailtoUrl;\n\n        try{\n          localStorage.removeItem(DRAFT_KEY);\n        }catch(e){}\n\n        textarea.value = \'\';\n        setStatus(\'已開啟郵件程式，請確認後送出。\', \'success\');\n      }catch(err){\n        setStatus(\'開啟郵件程式失敗，請稍後再試。\', \'error\');\n      }\n\n      setTimeout(function(){\n        sendBtn.disabled = false;\n      }, 500);\n    }\n\n    function setStatus(message, type){\n      if(!statusEl) return;\n      statusEl.textContent = message || \'\';\n      statusEl.classList.remove(\'is-error\', \'is-success\');\n\n      if(type === \'error\'){\n        statusEl.classList.add(\'is-error\');\n      }else if(type === \'success\'){\n        statusEl.classList.add(\'is-success\');\n      }\n    }\n\n    function clearStatus(){\n      setStatus(\'\', \'\');\n    }\n  })();\n</script>\n<!-- /wp:html -->','Help','','inherit','closed','closed','','641-revision-v1','','','2026-05-20 15:11:12','2026-05-20 15:11:12','',641,'https://m5wp.momentry.ddns.net/?p=1605',0,'revision','',0),
(1607,5,'2026-05-20 15:12:54','2026-05-20 15:12:54','<!-- wp:html -->\n<!-- Personalization / Settings 右侧内容区 -->\n<div id=\"ms-personalization-page\">\n  <div class=\"ms-page-inner\">\n\n    <div class=\"ms-profile-top\">\n      <div class=\"ms-avatar\" id=\"msAvatar\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 64 64\" fill=\"none\">\n          <circle cx=\"32\" cy=\"22\" r=\"12\" fill=\"#d7d7d7\"></circle>\n          <path d=\"M12 54c2.8-10 10.8-16 20-16s17.2 6 20 16\" fill=\"#d7d7d7\"></path>\n        </svg>\n      </div>\n\n      <button class=\"ms-photo-btn\" id=\"msPhotoBtn\" type=\"button\">更改照片</button>\n      <input id=\"msPhotoInput\" type=\"file\" accept=\"image/*\" hidden>\n    </div>\n\n    <div class=\"ms-settings-grid\">\n\n      <!-- 左侧 -->\n      <div class=\"ms-col ms-col-left\">\n        <div class=\"ms-field\">\n          <label for=\"ms-name\">Name</label>\n          <input id=\"ms-name\" type=\"text\" value=\"Una Nieh\">\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-email\">Email</label>\n          <input id=\"ms-email\" type=\"email\" value=\"una@mail.com\" readonly>\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-birthday\">Birthday</label>\n          <input id=\"ms-birthday\" type=\"text\" value=\"0000/00/00\" placeholder=\"YYYY/MM/DD\">\n        </div>\n\n        <div class=\"ms-field ms-password-row\">\n          <label for=\"ms-password\">Password</label>\n          <div class=\"ms-inline ms-password-inline\">\n            <input id=\"ms-password\" type=\"password\" value=\"\" placeholder=\"請輸入目前密碼\" autocomplete=\"new-password\">\n            <button class=\"ms-small-btn\" id=\"msChangePasswordBtn\" type=\"button\">更改密碼</button>\n          </div>\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-new-password\">輸入新密碼</label>\n          <input id=\"ms-new-password\" type=\"password\" value=\"\" disabled autocomplete=\"new-password\">\n        </div>\n\n        <div class=\"ms-field\">\n          <label for=\"ms-confirm-password\">再次確認密碼</label>\n          <input id=\"ms-confirm-password\" type=\"password\" value=\"\" disabled autocomplete=\"new-password\">\n        </div>\n      </div>\n\n      <!-- 右侧 -->\n      <div class=\"ms-col ms-col-right\">\n        <div class=\"ms-toggle-row\">\n          <div class=\"ms-toggle-label\">訂閱電子報</div>\n          <label class=\"ms-switch\">\n            <input id=\"msNewsletter\" type=\"checkbox\">\n            <span class=\"ms-slider\"></span>\n          </label>\n        </div>\n\n        <div class=\"ms-toggle-row ms-toggle-help-row\">\n          <div class=\"ms-toggle-label\">登入通知</div>\n          <div class=\"ms-toggle-right\">\n            <label class=\"ms-switch\">\n              <input id=\"msLoginNotice\" type=\"checkbox\" checked>\n              <span class=\"ms-slider\"></span>\n            </label>\n\n            <div class=\"ms-help-wrap\">\n              <span class=\"ms-help-icon\">?</span>\n              <span class=\"ms-help-bubble\">每次登入會發送 Email 通知</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"ms-language-row\">\n          <div class=\"ms-toggle-label\">語言</div>\n\n          <div class=\"ms-language-box\" id=\"msLangBox\">\n            <button type=\"button\" class=\"ms-language-trigger\" id=\"msLangTrigger\" aria-expanded=\"false\">\n              <span id=\"msLangCurrent\">繁體中文</span>\n              <span class=\"ms-language-arrow\">▾</span>\n            </button>\n\n            <div class=\"ms-language-menu\" id=\"msLangMenu\">\n              <button type=\"button\" class=\"ms-language-option is-active\" data-value=\"繁體中文\">繁體中文</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"簡體中文\">簡體中文</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"日本語\">日本語</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"English\">English</button>\n              <button type=\"button\" class=\"ms-language-option\" data-value=\"韓文\">韓文</button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div class=\"ms-save-wrap\">\n      <button class=\"ms-save-btn\" id=\"msSaveBtn\" type=\"button\">保存更改</button>\n    </div>\n\n  </div>\n</div>\n\n<style>\n  /* 只作用在右侧，不改左边 sidebar */\n  #ms-personalization-page{\n    min-height: 100vh;\n    padding: 36px 42px 44px;\n    box-sizing: border-box;\n    background: #ffffff;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n    color: #4a4a4a;\n  }\n\n  #ms-personalization-page *{\n    box-sizing: border-box;\n  }\n\n  #ms-personalization-page .ms-page-inner{\n    max-width: 960px;\n    margin: 0 auto;\n  }\n\n  #ms-personalization-page .ms-profile-top{\n    display: flex;\n    align-items: center;\n    gap: 30px;\n    margin-bottom: 20px;\n    padding-left: 2px;\n  }\n\n  #ms-personalization-page .ms-avatar{\n    width: 86px;\n    height: 86px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: #f4f4f4 center center / cover no-repeat;\n  }\n\n  #ms-personalization-page .ms-avatar svg{\n    width: 86px;\n    height: 86px;\n    display: block;\n  }\n\n  #ms-personalization-page .ms-photo-btn,\n  #ms-personalization-page .ms-small-btn{\n    border: 1px solid #cfcfcf;\n    background: #fff;\n    color: #666;\n    border-radius: 12px;\n    box-shadow: 0 2px 6px rgba(0,0,0,.06);\n    cursor: pointer;\n    transition: .18s ease;\n  }\n\n  #ms-personalization-page .ms-photo-btn{\n    height: 40px;\n    padding: 0 18px;\n    font-size: 14px;\n  }\n\n  #ms-personalization-page .ms-small-btn{\n    height: 38px;\n    padding: 0 16px;\n    font-size: 14px;\n    white-space: nowrap;\n    width: fit-content;\n  }\n\n  #ms-personalization-page .ms-photo-btn:hover,\n  #ms-personalization-page .ms-small-btn:hover,\n  #ms-personalization-page .ms-save-btn:hover{\n    transform: translateY(-1px);\n    box-shadow: 0 4px 10px rgba(0,0,0,.08);\n  }\n\n  #ms-personalization-page .ms-settings-grid{\n    display: grid;\n    grid-template-columns: 1.12fr 0.95fr;\n    gap: 82px;\n    align-items: start;\n  }\n\n  #ms-personalization-page .ms-col{\n    min-width: 0;\n  }\n\n  #ms-personalization-page .ms-field{\n    display: grid;\n    grid-template-columns: 112px 1fr;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 24px;\n  }\n\n  #ms-personalization-page .ms-field > label,\n  #ms-personalization-page .ms-toggle-label{\n    font-size: 16px;\n    line-height: 1.2;\n    letter-spacing: 0.4px;\n    color: #5b5b5b;\n    font-weight: 600;\n  }\n\n  #ms-personalization-page input[type=\"text\"],\n  #ms-personalization-page input[type=\"email\"],\n  #ms-personalization-page input[type=\"password\"]{\n    width: 250px;\n    max-width: 100%;\n    height: 46px;\n    padding: 0 16px;\n    font-size: 14px;\n    border: 1px solid #cfcfcf;\n    background: #fafafa;\n    border-radius: 12px;\n    outline: none;\n    color: #666;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;\n  }\n\n  #ms-personalization-page input[type=\"text\"]:focus,\n  #ms-personalization-page input[type=\"email\"]:focus,\n  #ms-personalization-page input[type=\"password\"]:focus{\n    border-color: #9db4df;\n    box-shadow: 0 0 0 3px rgba(157,180,223,.15);\n    background: #fff;\n  }\n\n  #ms-personalization-page input[disabled],\n  #ms-personalization-page input[readonly]{\n    opacity: .72;\n    cursor: not-allowed;\n  }\n\n  #ms-personalization-page input[readonly]{\n    background: #f3f3f3;\n    color: #888;\n  }\n\n  #ms-personalization-page .ms-inline{\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n\n  #ms-personalization-page .ms-password-inline{\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: nowrap;\n  }\n\n  #ms-personalization-page .ms-password-inline input{\n    width: 250px;\n    flex: 0 0 auto;\n  }\n\n  #ms-personalization-page .ms-password-inline .ms-small-btn{\n    height: 38px;\n    padding: 0 16px;\n    white-space: nowrap;\n    flex: 0 0 auto;\n  }\n\n  /* 右侧三组一起往左一点 */\n  #ms-personalization-page .ms-col-right{\n    margin-left: -34px;\n  }\n\n  /* 这里继续缩小右边三项的文字与控件距离 */\n  #ms-personalization-page .ms-toggle-row{\n    display: grid;\n    grid-template-columns: 112px auto;\n    align-items: center;\n    gap: 4px;\n    margin-bottom: 24px;\n    min-height: 46px;\n  }\n\n  #ms-personalization-page .ms-toggle-right{\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    position: relative;\n  }\n\n  #ms-personalization-page .ms-switch{\n    position: relative;\n    display: inline-block;\n    width: 64px;\n    height: 34px;\n    flex: 0 0 auto;\n  }\n\n  #ms-personalization-page .ms-switch input{\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  #ms-personalization-page .ms-slider{\n    position: absolute;\n    inset: 0;\n    background: #d8d8d8;\n    border-radius: 999px;\n    transition: .25s ease;\n    box-shadow: inset 0 1px 2px rgba(0,0,0,.08);\n  }\n\n  #ms-personalization-page .ms-slider:before{\n    content: \"\";\n    position: absolute;\n    width: 26px;\n    height: 26px;\n    left: 4px;\n    top: 4px;\n    background: #fff;\n    border-radius: 50%;\n    box-shadow: 0 1px 4px rgba(0,0,0,.12);\n    transition: .25s ease;\n  }\n\n  #ms-personalization-page .ms-switch input:checked + .ms-slider{\n    background: #9db4df;\n  }\n\n  #ms-personalization-page .ms-switch input:checked + .ms-slider:before{\n    transform: translateX(30px);\n  }\n\n  #ms-personalization-page .ms-help-wrap{\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  #ms-personalization-page .ms-help-icon{\n    width: 24px;\n    height: 24px;\n    border: 1px solid #cfcfcf;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 13px;\n    color: #999;\n    background: #fff;\n    line-height: 1;\n    cursor: default;\n  }\n\n  #ms-personalization-page .ms-help-bubble{\n    position: absolute;\n    left: 34px;\n    top: 50%;\n    transform: translateY(-50%);\n    white-space: nowrap;\n    min-height: 36px;\n    padding: 0 14px;\n    border: 1px solid #d7d7d7;\n    border-radius: 12px;\n    background: #fff;\n    color: #777;\n    font-size: 13px;\n    display: inline-flex;\n    align-items: center;\n    box-shadow: 0 2px 6px rgba(0,0,0,.05);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: .18s ease;\n  }\n\n  #ms-personalization-page .ms-help-wrap:hover .ms-help-bubble{\n    opacity: 1;\n    visibility: visible;\n  }\n\n  #ms-personalization-page .ms-language-row{\n    display: grid;\n    grid-template-columns: 112px 1fr;\n    align-items: center;\n    gap: 4px;\n    margin-top: 10px;\n  }  \n\n  #ms-personalization-page .ms-language-box{\n    position: relative;\n    width: 250px;\n    max-width: 100%;\n  }\n\n  #ms-personalization-page .ms-language-trigger{\n    width: 100%;\n    height: 46px;\n    padding: 0 14px 0 16px;\n    border: 1px solid #cfcfcf;\n    border-radius: 12px;\n    background: #fff;\n    color: #555;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    box-shadow: inset 0 1px 1px rgba(0,0,0,.02);\n  }\n\n  #ms-personalization-page .ms-language-arrow{\n    font-size: 12px;\n    color: #888;\n    margin-left: 12px;\n  }\n\n  #ms-personalization-page .ms-language-menu{\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    width: 100%;\n    background: #fff;\n    border: 1px solid #d6d6d6;\n    border-radius: 14px;\n    box-shadow: 0 10px 24px rgba(0,0,0,.08);\n    padding: 8px;\n    display: none;\n    z-index: 20;\n  }\n\n  #ms-personalization-page .ms-language-box.is-open .ms-language-menu{\n    display: block;\n  }\n\n  #ms-personalization-page .ms-language-option{\n    width: 100%;\n    border: 0;\n    background: transparent;\n    text-align: left;\n    padding: 11px 12px;\n    border-radius: 10px;\n    font-size: 14px;\n    color: #555;\n    cursor: pointer;\n  }\n\n  #ms-personalization-page .ms-language-option:hover,\n  #ms-personalization-page .ms-language-option.is-active{\n    background: #f1f1f1;\n  }\n\n  #ms-personalization-page .ms-save-wrap{\n    display: flex;\n    justify-content: center;\n    margin-top: 34px;\n  }\n\n  #ms-personalization-page .ms-save-btn{\n    min-width: 170px;\n    height: 54px;\n    border: 1px solid #cfcfcf;\n    border-radius: 16px;\n    background: #fff;\n    color: #555;\n    font-size: 17px;\n    font-weight: 500;\n    box-shadow: 0 4px 12px rgba(0,0,0,.05);\n    cursor: pointer;\n    transition: .18s ease;\n  }\n\n  @media (max-width: 1100px){\n    #ms-personalization-page .ms-settings-grid{\n      grid-template-columns: 1fr;\n      gap: 26px;\n    }\n\n    #ms-personalization-page .ms-col-right{\n      margin-left: 0;\n    }\n  }\n\n  @media (max-width: 760px){\n    #ms-personalization-page{\n      padding: 24px 18px 36px;\n    }\n\n    #ms-personalization-page .ms-field,\n    #ms-personalization-page .ms-toggle-row,\n    #ms-personalization-page .ms-language-row{\n      grid-template-columns: 1fr;\n      gap: 10px;\n      margin-bottom: 20px;\n    }\n\n    #ms-personalization-page input[type=\"text\"],\n    #ms-personalization-page input[type=\"email\"],\n    #ms-personalization-page input[type=\"password\"],\n    #ms-personalization-page .ms-inline input,\n    #ms-personalization-page .ms-password-inline input,\n    #ms-personalization-page .ms-language-box{\n      width: 100%;\n    }\n\n    #ms-personalization-page .ms-password-inline{\n      flex-wrap: wrap;\n    }\n\n    #ms-personalization-page .ms-help-bubble{\n      left: 0;\n      top: calc(100% + 8px);\n      transform: none;\n      white-space: normal;\n      min-width: 180px;\n    }\n\n    #ms-personalization-page .ms-save-btn{\n      width: 100%;\n      min-width: 0;\n      height: 56px;\n      font-size: 18px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n  var root = document.getElementById(\'ms-personalization-page\');\n  if (!root) return;\n\n  var STORAGE_KEY = \'ms_personalization_settings_v1\';\n\n  var avatar = document.getElementById(\'msAvatar\');\n  var avatarSvg = avatar ? avatar.querySelector(\'svg\') : null;\n  var photoBtn = document.getElementById(\'msPhotoBtn\');\n  var photoInput = document.getElementById(\'msPhotoInput\');\n\n  var nameInput = document.getElementById(\'ms-name\');\n  var emailInput = document.getElementById(\'ms-email\');\n  var birthdayInput = document.getElementById(\'ms-birthday\');\n\n  var currentPasswordInput = document.getElementById(\'ms-password\');\n  var newPasswordInput = document.getElementById(\'ms-new-password\');\n  var confirmPasswordInput = document.getElementById(\'ms-confirm-password\');\n  var changePasswordBtn = document.getElementById(\'msChangePasswordBtn\');\n\n  var newsletterInput = document.getElementById(\'msNewsletter\');\n  var loginNoticeInput = document.getElementById(\'msLoginNotice\');\n\n  var saveBtn = document.getElementById(\'msSaveBtn\');\n\n  var box = document.getElementById(\'msLangBox\');\n  var trigger = document.getElementById(\'msLangTrigger\');\n  var menu = document.getElementById(\'msLangMenu\');\n  var current = document.getElementById(\'msLangCurrent\');\n\n  var passwordEditMode = false;\n  var pendingPhotoData = \'\';\n\n  function getDefaultData(){\n    return {\n      name: nameInput ? nameInput.value : \'\',\n      email: emailInput ? emailInput.value : \'\',\n      birthday: birthdayInput ? birthdayInput.value : \'\',\n      password: \'12345678\',\n      newsletter: newsletterInput ? newsletterInput.checked : false,\n      loginNotice: loginNoticeInput ? loginNoticeInput.checked : true,\n      language: current ? current.textContent.trim() : \'繁體中文\',\n      photoData: \'\'\n    };\n  }\n\n  function getSavedData(){\n    try{\n      var raw = localStorage.getItem(STORAGE_KEY);\n      return raw ? JSON.parse(raw) : null;\n    }catch(err){\n      return null;\n    }\n  }\n\n  function saveData(data){\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n  }\n\n  function setAvatar(photoData){\n    if (!avatar) return;\n    if (photoData) {\n      avatar.style.backgroundImage = \'url(\"\' + photoData + \'\")\';\n      if (avatarSvg) avatarSvg.style.display = \'none\';\n    } else {\n      avatar.style.backgroundImage = \'none\';\n      if (avatarSvg) avatarSvg.style.display = \'block\';\n    }\n  }\n\n  function applyData(data){\n    if (!data) return;\n\n    if (nameInput) nameInput.value = data.name || \'\';\n    if (emailInput) emailInput.value = data.email || \'\';\n    if (birthdayInput) birthdayInput.value = data.birthday || \'\';\n    if (newsletterInput) newsletterInput.checked = !!data.newsletter;\n    if (loginNoticeInput) loginNoticeInput.checked = !!data.loginNotice;\n\n    if (currentPasswordInput) currentPasswordInput.value = \'\';\n    if (newPasswordInput) newPasswordInput.value = \'\';\n    if (confirmPasswordInput) confirmPasswordInput.value = \'\';\n\n    if (current && data.language) {\n      current.textContent = data.language;\n      if (menu) {\n        menu.querySelectorAll(\'.ms-language-option\').forEach(function(item){\n          item.classList.toggle(\'is-active\', item.getAttribute(\'data-value\') === data.language);\n        });\n      }\n    }\n\n    if (data.photoData) {\n      pendingPhotoData = data.photoData;\n      setAvatar(data.photoData);\n    }\n  }\n\n  function enablePasswordEditing(){\n    passwordEditMode = true;\n    if (newPasswordInput) newPasswordInput.disabled = false;\n    if (confirmPasswordInput) confirmPasswordInput.disabled = false;\n    if (newPasswordInput) newPasswordInput.value = \'\';\n    if (confirmPasswordInput) confirmPasswordInput.value = \'\';\n    if (changePasswordBtn) changePasswordBtn.textContent = \'取消更改\';\n    if (newPasswordInput) newPasswordInput.focus();\n  }\n\n  function disablePasswordEditing(clearFields){\n    passwordEditMode = false;\n    if (newPasswordInput) {\n      newPasswordInput.disabled = true;\n      if (clearFields) newPasswordInput.value = \'\';\n    }\n    if (confirmPasswordInput) {\n      confirmPasswordInput.disabled = true;\n      if (clearFields) confirmPasswordInput.value = \'\';\n    }\n    if (changePasswordBtn) changePasswordBtn.textContent = \'更改密碼\';\n  }\n\n  function isValidEmail(email){\n    return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n  }\n\n  function isValidBirthday(text){\n    if (!text) return true;\n    if (!/^\\d{4}\\/\\d{2}\\/\\d{2}$/.test(text)) return false;\n\n    var parts = text.split(\'/\');\n    var y = parseInt(parts[0], 10);\n    var m = parseInt(parts[1], 10);\n    var d = parseInt(parts[2], 10);\n\n    var dt = new Date(y, m - 1, d);\n    return (\n      dt.getFullYear() === y &&\n      dt.getMonth() === m - 1 &&\n      dt.getDate() === d\n    );\n  }\n\n  function getFormData(){\n    return {\n      name: nameInput ? nameInput.value.trim() : \'\',\n      email: emailInput ? emailInput.value.trim() : \'\',\n      birthday: birthdayInput ? birthdayInput.value.trim() : \'\',\n      newsletter: newsletterInput ? newsletterInput.checked : false,\n      loginNotice: loginNoticeInput ? loginNoticeInput.checked : false,\n      language: current ? current.textContent.trim() : \'繁體中文\',\n      photoData: pendingPhotoData || \'\'\n    };\n  }\n\n  function handleSave(){\n    var data = getFormData();\n    var saved = getSavedData() || getDefaultData();\n\n    if (!data.name) {\n      alert(\'請輸入姓名\');\n      nameInput && nameInput.focus();\n      return;\n    }\n\n    if (!data.email) {\n      alert(\'Email 不可為空\');\n      return;\n    }\n\n    if (!isValidEmail(data.email)) {\n      alert(\'Email 格式不正確\');\n      return;\n    }\n\n    if (!isValidBirthday(data.birthday)) {\n      alert(\'Birthday 格式請使用 YYYY/MM/DD\');\n      birthdayInput && birthdayInput.focus();\n      return;\n    }\n\n    if (passwordEditMode) {\n      var newPwd = newPasswordInput ? newPasswordInput.value : \'\';\n      var confirmPwd = confirmPasswordInput ? confirmPasswordInput.value : \'\';\n\n      if (!newPwd) {\n        alert(\'請輸入新密碼\');\n        newPasswordInput && newPasswordInput.focus();\n        return;\n      }\n\n      if (newPwd.length < 6) {\n        alert(\'新密碼至少需要 6 碼\');\n        newPasswordInput && newPasswordInput.focus();\n        return;\n      }\n\n      if (newPwd !== confirmPwd) {\n        alert(\'再次確認密碼不一致\');\n        confirmPasswordInput && confirmPasswordInput.focus();\n        return;\n      }\n\n      data.password = newPwd;\n      disablePasswordEditing(true);\n    } else {\n      data.password = saved.password || \'12345678\';\n    }\n\n    saveData(data);\n\n    if (currentPasswordInput) currentPasswordInput.value = \'\';\n    alert(\'保存成功\');\n  }\n\n  function initLanguageDropdown(){\n    if(!box || !trigger || !menu || !current) return;\n\n    trigger.addEventListener(\'click\', function(e){\n      e.stopPropagation();\n      box.classList.toggle(\'is-open\');\n      trigger.setAttribute(\'aria-expanded\', box.classList.contains(\'is-open\') ? \'true\' : \'false\');\n    });\n\n    menu.addEventListener(\'click\', function(e){\n      var btn = e.target.closest(\'.ms-language-option\');\n      if(!btn) return;\n\n      var value = btn.getAttribute(\'data-value\') || btn.textContent.trim();\n      current.textContent = value;\n\n      menu.querySelectorAll(\'.ms-language-option\').forEach(function(item){\n        item.classList.remove(\'is-active\');\n      });\n      btn.classList.add(\'is-active\');\n\n      box.classList.remove(\'is-open\');\n      trigger.setAttribute(\'aria-expanded\', \'false\');\n    });\n\n    document.addEventListener(\'click\', function(e){\n      if(!box.contains(e.target)){\n        box.classList.remove(\'is-open\');\n        trigger.setAttribute(\'aria-expanded\', \'false\');\n      }\n    });\n  }\n\n  function initPhotoUpload(){\n    if (!photoBtn || !photoInput) return;\n\n    photoBtn.addEventListener(\'click\', function(){\n      photoInput.click();\n    });\n\n    photoInput.addEventListener(\'change\', function(){\n      var file = photoInput.files && photoInput.files[0];\n      if (!file) return;\n\n      if (!file.type || file.type.indexOf(\'image/\') !== 0) {\n        alert(\'請選擇圖片檔案\');\n        photoInput.value = \'\';\n        return;\n      }\n\n      var reader = new FileReader();\n      reader.onload = function(evt){\n        pendingPhotoData = evt.target.result || \'\';\n        setAvatar(pendingPhotoData);\n      };\n      reader.readAsDataURL(file);\n    });\n  }\n\n  function initPasswordFlow(){\n    if (!changePasswordBtn) return;\n\n    disablePasswordEditing(true);\n\n    changePasswordBtn.addEventListener(\'click\', function(){\n      var saved = getSavedData() || getDefaultData();\n      var currentPwd = currentPasswordInput ? currentPasswordInput.value : \'\';\n\n      if (passwordEditMode) {\n        disablePasswordEditing(true);\n        if (currentPasswordInput) currentPasswordInput.value = \'\';\n        return;\n      }\n\n      if (!currentPwd) {\n        alert(\'請先輸入目前密碼\');\n        currentPasswordInput && currentPasswordInput.focus();\n        return;\n      }\n\n      if (currentPwd !== (saved.password || \'\')) {\n        alert(\'目前密碼不正確\');\n        currentPasswordInput && currentPasswordInput.focus();\n        return;\n      }\n\n      enablePasswordEditing();\n    });\n  }\n\n  function init(){\n    initLanguageDropdown();\n    initPhotoUpload();\n    initPasswordFlow();\n\n    var saved = getSavedData();\n    if (saved) {\n      applyData(saved);\n    } else {\n      var defaults = getDefaultData();\n      saveData(defaults);\n      applyData(defaults);\n    }\n\n    if (saveBtn) {\n      saveBtn.addEventListener(\'click\', handleSave);\n    }\n  }\n\n  init();\n})();\n</script>\n<!-- /wp:html -->','Settings','','inherit','closed','closed','','639-revision-v1','','','2026-05-20 15:12:54','2026-05-20 15:12:54','',639,'https://m5wp.momentry.ddns.net/?p=1607',0,'revision','',0),
(1608,4,'2026-05-21 01:36:24','2026-05-21 01:36:24','<!-- wp:html -->\n<style>\n/* ── Glass mixin variables ── */\n:root {\n  --glass-bg:           rgba(255, 255, 255, 0.82);\n  --glass-bg-hover:     rgba(255, 255, 255, 0.92);\n  --glass-border:       rgba(255, 255, 255, 0.90);\n  --glass-shadow:       0 4px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95);\n  --glass-shadow-hover: 0 6px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1);\n  --glass-blur:         blur(18px);\n  --glass-inner-bg:     rgba(248, 249, 251, 0.80);\n  --glass-inner-border: rgba(255, 255, 255, 0.85);\n  --glass-inner-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.90);\n}\n\n/* ── Evaluation 頁面樣式 ── */\n.sl-wrap {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  color: #374151;\n}\n\n.sl-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 2px;\n}\n\n.sl-header h1 {\n  font-size: 20px !important;\n  font-weight: 600 !important;\n  color: #111827 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n.sl-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  color: #6b7280;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 999px;\n  padding: 2px 9px;\n  letter-spacing: 0.02em;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-desc {\n  font-size: 13px;\n  color: #9ca3af;\n  line-height: 1.6;\n  margin-top: 4px;\n}\n\n/* ── 卡片：玻璃風格 ── */\n.sl-card {\n  background: var(--glass-bg);\n  border: 1px solid var(--glass-border);\n  border-radius: 16px;\n  padding: 20px 24px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  /* 頂部反光條 */\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-card-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n.sl-card-sublabel {\n  font-size: 11px;\n  color: #c4c9d4;\n  font-weight: 400;\n  margin-left: 6px;\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n/* ── Evaluation Trigger ── */\n.sl-trigger-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.sl-trigger-desc {\n  flex: 1;\n  font-size: 13px;\n  color: #374151;\n  line-height: 1.6;\n  min-width: 180px;\n}\n\n#slRunBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 20px;\n  background: var(--glass-bg);\n  color: #111827;\n  border: 1px solid var(--glass-border);\n  border-radius: 12px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-shadow);\n  transition: background .15s, box-shadow .15s, transform .08s;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* 按鈕頂部反光 */\n#slRunBtn::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n#slRunBtn:hover {\n  background: var(--glass-bg-hover);\n  box-shadow: var(--glass-shadow-hover);\n}\n#slRunBtn:active { transform: scale(.97); }\n#slRunBtn:disabled {\n  background: rgba(255,255,255,0.25);\n  color: #9ca3af;\n  border-color: rgba(255,255,255,0.35);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n#slRunBtn .sl-spinner {\n  display: none;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(0,0,0,.12);\n  border-top-color: #374151;\n  border-radius: 50%;\n  animation: slSpin .7s linear infinite;\n}\n\n#slRunBtn.running .sl-spinner  { display: block; }\n#slRunBtn.running .sl-run-icon { display: none; }\n\n@keyframes slSpin { to { transform: rotate(360deg); } }\n\n.sl-status-row {\n  margin-top: 12px;\n  font-size: 12px;\n  color: #9ca3af;\n  min-height: 18px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sl-status-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n}\n\n.sl-status-dot.running {\n  background: #9ca3af;\n  animation: slPulse 1s ease-in-out infinite;\n}\n\n.sl-status-dot.done  { background: #6b7280; }\n.sl-status-dot.error { background: #ef4444; }\n\n@keyframes slPulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: .3; }\n}\n\n/* ── Overall Metrics ── */\n.sl-metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 12px;\n}\n\n@media (max-width: 600px) {\n  .sl-metrics-grid { grid-template-columns: repeat(3, 1fr); }\n}\n\n.sl-metric {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 16px 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  position: relative;\n  overflow: hidden;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n/* metric 頂部反光 */\n.sl-metric::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-metric-label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #9ca3af;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.sl-metric-value {\n  font-size: 26px;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-metric-sub {\n  font-size: 11px;\n  color: #9ca3af;\n  line-height: 1.4;\n}\n\n/* ── 維度卡片 ── */\n.sl-core-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n}\n\n.sl-adv-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.sl-dimension-card {\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 10px;\n  padding: 14px;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n  position: relative;\n  overflow: hidden;\n}\n\n.sl-dimension-card::before {\n  content: \'\';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.1) 100%);\n}\n\n.sl-dimension-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #111827;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  margin-bottom: 10px;\n}\n\n.sl-dimension-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 11px;\n  color: #6b7280;\n  padding: 3px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.5);\n}\n\n.sl-dimension-row:last-child { border-bottom: none; }\n\n.sl-dimension-row strong {\n  color: #111827;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Last Evaluation ── */\n.sl-last-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.sl-last-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.sl-last-time {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111827;\n  font-variant-numeric: tabular-nums;\n}\n\n.sl-last-label {\n  font-size: 12px;\n  color: #9ca3af;\n}\n\n.sl-history-list {\n  margin-top: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sl-history-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 12px;\n  background: var(--glass-inner-bg);\n  border: 1px solid var(--glass-inner-border);\n  border-radius: 8px;\n  font-size: 12px;\n  color: #374151;\n  backdrop-filter: var(--glass-blur);\n  -webkit-backdrop-filter: var(--glass-blur);\n  box-shadow: var(--glass-inner-shadow);\n}\n\n.sl-history-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #6b7280;\n  flex-shrink: 0;\n}\n\n.sl-history-time {\n  color: #9ca3af;\n  margin-left: auto;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n</style>\n\n<div class=\"sl-wrap\">\n\n  <!-- 頁面標頭 -->\n  <div>\n    <div class=\"sl-header\">\n      <h1>🔬 Evaluation </h1>\n      <span class=\"sl-badge\">Live Evaluation</span>\n    </div>\n    <p class=\"sl-desc\">搜尋品質評估入口。觸發 Evaluation 並查看整體與各維度指標結果。</p>\n  </div>\n\n  <!-- Evaluation Trigger -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Evaluation Trigger</div>\n    <div class=\"sl-trigger-row\">\n      <div class=\"sl-trigger-desc\">\n        點擊按鈕觸發搜尋品質評估流程。<br>\n        系統會跑目前設定好的考題並更新最新指標。\n      </div>\n      <button id=\"slRunBtn\" type=\"button\">\n        <span class=\"sl-run-icon\">&#x25B6;&#xFE0E; Run Evaluation</span>\n        <span class=\"sl-spinner\"></span>\n        <span class=\"sl-running-text\" style=\"display:none;\">Running…</span>\n      </button>\n    </div>\n    <div class=\"sl-status-row\">\n      <div class=\"sl-status-dot\" id=\"slStatusDot\"></div>\n      <span id=\"slStatusText\">讀取中…</span>\n    </div>\n  </div>\n\n  <!-- Overall Metrics -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Overall</div>\n    <div class=\"sl-metrics-grid\">\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Queries</div>\n        <div class=\"sl-metric-value\" id=\"slQueries\">—</div>\n        <div class=\"sl-metric-sub\">總題數</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Hit @ 3</div>\n        <div class=\"sl-metric-value\" id=\"slHit3\">—</div>\n        <div class=\"sl-metric-sub\">前 3 名命中率</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">MRR</div>\n        <div class=\"sl-metric-value\" id=\"slMrr\">—</div>\n        <div class=\"sl-metric-sub\">Mean Reciprocal Rank</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Time Error</div>\n        <div class=\"sl-metric-value\" id=\"slTimeErr\">—</div>\n        <div class=\"sl-metric-sub\">平均時間誤差</div>\n      </div>\n      <div class=\"sl-metric\">\n        <div class=\"sl-metric-label\">Latency</div>\n        <div class=\"sl-metric-value\" id=\"slLatency\">—</div>\n        <div class=\"sl-metric-sub\">平均 API 延遲</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Core Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Core Dimensions\n      <span class=\"sl-card-sublabel\">WHO / WHERE / ACTION</span>\n    </div>\n    <div class=\"sl-core-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHO</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhoQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhoHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhoMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhoTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHERE</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhereQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhereHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhereMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhereTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">ACTION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slActionQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slActionHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slActionMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slActionTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Advanced Dimensions -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">\n      Advanced Dimensions\n      <span class=\"sl-card-sublabel\">WHAT / COMBINATION</span>\n    </div>\n    <div class=\"sl-adv-grid\">\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">WHAT</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slWhatQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slWhatHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slWhatMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slWhatTimeErr\">—</strong></div>\n      </div>\n\n      <div class=\"sl-dimension-card\">\n        <div class=\"sl-dimension-title\">COMBINATION</div>\n        <div class=\"sl-dimension-row\"><span>Queries</span><strong id=\"slCombinationQueries\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Hit @ 3</span><strong id=\"slCombinationHit3\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>MRR</span><strong id=\"slCombinationMrr\">—</strong></div>\n        <div class=\"sl-dimension-row\"><span>Time Error</span><strong id=\"slCombinationTimeErr\">—</strong></div>\n      </div>\n\n    </div>\n  </div>\n\n  <!-- Last Evaluation -->\n  <div class=\"sl-card\">\n    <div class=\"sl-card-label\">Last Evaluation</div>\n    <div class=\"sl-last-row\">\n      <div class=\"sl-last-info\">\n        <div class=\"sl-last-time\" id=\"slLastRun\">—</div>\n        <div class=\"sl-last-label\">Last run</div>\n      </div>\n    </div>\n    <div class=\"sl-history-list\" id=\"slHistoryList\"></div>\n  </div>\n\n</div>\n\n<script>\n(function () {\n  var btn        = document.getElementById(\'slRunBtn\');\n  var dot        = document.getElementById(\'slStatusDot\');\n  var statusText = document.getElementById(\'slStatusText\');\n\n  var LAST_API_URL = \'https://accusys1.app.n8n.cloud/webhook/evaluation-last\';\n  var RUN_API_URL  = \'https://accusys1.app.n8n.cloud/webhook/evaluation-run\';\n\n  /* ── format helpers ── */\n  function hasVal(v) { return !(v === null || v === undefined || v === \'\'); }\n  function fmtPct(v)   { return hasVal(v) ? Math.round(Number(v) * 100) + \'%\' : \'—\'; }\n  function fmtFixed(v) { return hasVal(v) ? Number(v).toFixed(2) : \'—\'; }\n  function fmtSec(v)   { return hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  /* dimension helpers：無 queries 時顯示 — */\n  function dQ(v)      { return Number(v || 0) > 0 ? String(Number(v)) : \'—\'; }\n  function dPct(v, q) { return Number(q || 0) > 0 ? Math.round(Number(v || 0) * 100) + \'%\' : \'—\'; }\n  function dFix(v, q) { return Number(q || 0) > 0 ? Number(v || 0).toFixed(2) : \'—\'; }\n  function dSec(v, q) { return Number(q || 0) > 0 && hasVal(v) ? Number(v).toFixed(2) + \'s\' : \'—\'; }\n\n  function setText(id, val) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = val;\n  }\n\n  /* ── render all metrics ── */\n  function renderMetrics(data) {\n    setText(\'slQueries\', hasVal(data.total_queries) ? String(Number(data.total_queries)) : \'—\');\n    setText(\'slHit3\',    fmtPct(data.hit_at_3));\n    setText(\'slMrr\',     fmtFixed(data.mrr));\n    setText(\'slTimeErr\', fmtSec(data.avg_time_error));\n    setText(\'slLatency\', hasVal(data.avg_latency_ms) ? Math.round(Number(data.avg_latency_ms)) + \' ms\' : \'—\');\n    setText(\'slLastRun\', data.run_time || \'—\');\n\n    setText(\'slWhoQueries\', dQ(data.who_queries));\n    setText(\'slWhoHit3\',    dPct(data.who_hit_at_3, data.who_queries));\n    setText(\'slWhoMrr\',     dFix(data.who_mrr, data.who_queries));\n    setText(\'slWhoTimeErr\', dSec(data.who_avg_time_error, data.who_queries));\n\n    setText(\'slWhereQueries\', dQ(data.where_queries));\n    setText(\'slWhereHit3\',    dPct(data.where_hit_at_3, data.where_queries));\n    setText(\'slWhereMrr\',     dFix(data.where_mrr, data.where_queries));\n    setText(\'slWhereTimeErr\', dSec(data.where_avg_time_error, data.where_queries));\n\n    setText(\'slActionQueries\', dQ(data.action_queries));\n    setText(\'slActionHit3\',    dPct(data.action_hit_at_3, data.action_queries));\n    setText(\'slActionMrr\',     dFix(data.action_mrr, data.action_queries));\n    setText(\'slActionTimeErr\', dSec(data.action_avg_time_error, data.action_queries));\n\n    setText(\'slWhatQueries\', dQ(data.what_queries));\n    setText(\'slWhatHit3\',    dPct(data.what_hit_at_3, data.what_queries));\n    setText(\'slWhatMrr\',     dFix(data.what_mrr, data.what_queries));\n    setText(\'slWhatTimeErr\', dSec(data.what_avg_time_error, data.what_queries));\n\n    setText(\'slCombinationQueries\', dQ(data.combination_queries));\n    setText(\'slCombinationHit3\',    dPct(data.combination_hit_at_3, data.combination_queries));\n    setText(\'slCombinationMrr\',     dFix(data.combination_mrr, data.combination_queries));\n    setText(\'slCombinationTimeErr\', dSec(data.combination_avg_time_error, data.combination_queries));\n\n    /* History：若 API 有回傳 history 陣列才渲染 */\n    if (Array.isArray(data.history) && data.history.length) {\n      var container = document.getElementById(\'slHistoryList\');\n      if (container) {\n        container.innerHTML = \'\';\n        data.history.forEach(function (item, i) {\n          var div = document.createElement(\'div\');\n          div.className = \'sl-history-item\';\n\n          var dotEl = document.createElement(\'div\');\n          dotEl.className = \'sl-history-dot\';\n          div.appendChild(dotEl);\n\n          var label = document.createElement(\'span\');\n          label.textContent =\n            \'Evaluation #\' + (data.history.length - i) +\n            \' — Hit@3: \' + fmtPct(item.hit_at_3) +\n            \', MRR: \' + fmtFixed(item.mrr) +\n            \', Time Error: \' + fmtSec(item.avg_time_error);\n          div.appendChild(label);\n\n          var timeEl = document.createElement(\'span\');\n          timeEl.className = \'sl-history-time\';\n          timeEl.textContent = item.run_time || \'\';\n          div.appendChild(timeEl);\n\n          container.appendChild(div);\n        });\n      }\n    }\n  }\n\n  /* ── button running state ── */\n  function setRunning(on) {\n    if (!btn) return;\n    btn.disabled = on;\n    btn.classList.toggle(\'running\', on);\n    var icon = btn.querySelector(\'.sl-run-icon\');\n    var txt  = btn.querySelector(\'.sl-running-text\');\n    if (icon) icon.style.display = on ? \'none\' : \'inline\';\n    if (txt)  txt.style.display  = on ? \'inline\' : \'none\';\n  }\n\n  /* ── load latest on page load ── */\n  async function loadLatest() {\n    try {\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'讀取最新 evaluation…\';\n\n      var res = await fetch(LAST_API_URL, { method: \'GET\' });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'no data\');\n\n      renderMetrics(data);\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'已載入最新 evaluation 結果\';\n    } catch (err) {\n      console.error(\'loadLatest error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'讀取失敗：\' + err.message;\n    }\n  }\n\n  /* ── run evaluation ── */\n  async function runEvaluation() {\n    try {\n      setRunning(true);\n      dot.className = \'sl-status-dot running\';\n      statusText.textContent = \'正在執行 evaluation…\';\n\n      var res = await fetch(RUN_API_URL, {\n        method: \'POST\',\n        headers: { \'Content-Type\': \'application/json\' },\n        body: JSON.stringify({})\n      });\n      if (!res.ok) throw new Error(\'HTTP \' + res.status);\n\n      var data = await res.json();\n      if (!data || data.ok === false) throw new Error(data && data.message ? data.message : \'evaluation failed\');\n\n      dot.className = \'sl-status-dot done\';\n      statusText.textContent = \'Evaluation 執行完成，更新指標中…\';\n      setTimeout(loadLatest, 800);\n    } catch (err) {\n      console.error(\'runEvaluation error:\', err);\n      dot.className = \'sl-status-dot error\';\n      statusText.textContent = \'Evaluation 執行失敗：\' + err.message;\n    } finally {\n      setRunning(false);\n    }\n  }\n\n  /* ── init ── */\n  loadLatest();\n  if (btn) btn.addEventListener(\'click\', function () { if (!btn.disabled) runEvaluation(); });\n})();\n</script>\n<!-- /wp:html -->','Measure','','inherit','closed','closed','','1035-revision-v1','','','2026-05-21 01:36:24','2026-05-21 01:36:24','',1035,'https://m5wp.momentry.ddns.net/?p=1608',0,'revision','',0),
(1609,4,'2026-05-21 01:47:35','2026-05-21 01:47:35','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-21 01:47:35','2026-05-21 01:47:35','',523,'https://m5wp.momentry.ddns.net/?p=1609',0,'revision','',0),
(1610,4,'2026-05-21 02:04:21','2026-05-21 02:04:21','<!-- wp:html -->\n<!-- Momentry v6 — 貼到 WordPress HTML block，不含任何 <script> -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n.wp-block-html,.entry-content .wp-block-html,.wp-block-html>*{max-width:none!important;width:100%!important}\n.entry-content,.post-content,.page-content,.wp-block-post-content,.is-layout-constrained>*,.is-layout-flow>*{max-width:none!important}\n\n#msrR6{\n  --tp:#1a1a1a;--ts:#6e6e73;--tm:#aeaeb2;\n  --bd:#d8d8dc;--bdl:#e8e8ea;\n  --sf:#ffffff;--sf2:#f2f2f4;--sf3:#e8e8ea;\n  --msr-accent:#8fbef8;\n  --msr-accent-soft:#eaf2ff;\n  --msr-accent-text:#1967d2;\n  --sh1:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);\n  --sh2:0 4px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);\n  --sh3:0 12px 40px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);\n  --fb:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --fm:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:10px;--rl:16px;--rxl:20px;\n  all:initial;display:block;\n  font-family:var(--fb);font-size:13px;line-height:1.55;\n  color:var(--tp);box-sizing:border-box;\n  padding:24px 32px 40px;width:100%;\n  background:transparent;-webkit-font-smoothing:antialiased;\n}\n#msrR6 *,#msrR6 *::before,#msrR6 *::after{box-sizing:border-box;margin:0;padding:0}\n\n/* ── Layout ── */\n#msrR6 .ms-wrap{display:flex!important;gap:20px!important;align-items:flex-start!important;width:100%!important}\n#msrR6 .ms-panel{flex:1 1 0!important;min-width:0!important;position:relative!important}\n\n/* ── Header ── */\n#msrR6 .ms-hdr{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:20px!important}\n#msrR6 .ms-back{\n  all:unset!important;width:34px!important;height:34px!important;border-radius:50%!important;\n  background:#fff!important;border:1px solid var(--msr-accent-soft)!important;\n  display:flex!important;align-items:center!important;justify-content:center!important;\n  cursor:pointer!important;box-shadow:var(--sh1)!important;font-size:20px!important;\n  color:var(--msr-accent-text)!important;flex-shrink:0!important;line-height:1!important;\n  transition:background .15s ease,border-color .15s ease,color .15s ease!important;\n}\n#msrR6 .ms-back:hover{background:var(--msr-accent-soft)!important;border-color:var(--msr-accent)!important;}\n#msrR6 .ms-ttl{flex:1!important;font-size:14px!important;font-weight:400!important;color:var(--ts)!important;letter-spacing:0!important;}\n#msrR6 .ms-ttl strong{font-weight:600!important;color:var(--tp)!important}\n#msrR6 .ms-fa{position:relative!important;flex-shrink:0!important}\n#msrR6 .ms-fbtn{\n  all:unset!important;width:34px!important;height:34px!important;border-radius:99px!important;\n  background:var(--sf)!important;border:1px solid var(--msr-accent-soft)!important;\n  display:flex!important;align-items:center!important;justify-content:center!important;\n  cursor:pointer!important;box-shadow:var(--sh1)!important;\n  color:var(--msr-accent-text)!important;\n  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;\n}\n#msrR6 .ms-fbtn:hover{background:var(--msr-accent-soft)!important;border-color:var(--msr-accent)!important;}\n#msrR6 .ms-fbtn svg rect{fill:currentColor!important;}\n\n/* ── Grid ── */\n#msrR6 .ms-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:24px 20px!important;width:100%!important;}\n\n/* ── Card ── */\n#msrR6 .ms-card{background:transparent!important;border-radius:0!important;overflow:visible!important;cursor:pointer!important;box-shadow:none!important;border:none!important;transition:transform .18s ease!important;display:block!important;}\n#msrR6 .ms-card:hover{transform:translateY(-3px)!important}\n#msrR6 .ms-thumb{position:relative!important;width:100%!important;padding-bottom:72%!important;background:var(--sf3)!important;overflow:hidden!important;display:block!important;border-radius:12px!important;}\n#msrR6 .ms-thumb img,#msrR6 .ms-thumb video{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border:none!important;border-radius:0!important;box-shadow:none!important;max-width:none!important;}\n#msrR6 .ms-pov{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,.10)!important;opacity:0!important;transition:opacity .2s!important;border-radius:12px!important;}\n#msrR6 .ms-card.is-vid:hover .ms-pov{opacity:1!important}\n#msrR6 .ms-pov-inner{width:34px!important;height:34px!important;border-radius:50%!important;background:rgba(255,255,255,.22)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;border:1px solid rgba(255,255,255,.38)!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 1px 6px rgba(0,0,0,.18)!important;}\n#msrR6 .ms-pov-inner svg{width:12px!important;height:12px!important;fill:#fff!important;margin-left:2px!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))!important;}\n#msrR6 .ms-vbadge{position:absolute!important;bottom:6px!important;right:6px!important;background:rgba(0,0,0,.55)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;color:#fff!important;font-size:9px!important;font-family:var(--fm)!important;padding:2px 5px!important;border-radius:3px!important;letter-spacing:.01em!important;}\n#msrR6 .ms-tbadge{position:absolute!important;top:6px!important;left:6px!important;background:rgba(0,0,0,.42)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;color:#fff!important;font-size:9px!important;padding:2px 7px!important;border-radius:4px!important;letter-spacing:.04em!important;font-weight:500!important;}\n#msrR6 .ms-cmeta{padding:10px 2px 0!important}\n#msrR6 .ms-ctitle{font-size:13.5px!important;font-weight:600!important;color:var(--tp)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin-bottom:6px!important;letter-spacing:-0.01em!important;}\n#msrR6 .ms-cinfo{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2px 6px!important;}\n#msrR6 .ms-crow{display:flex!important;align-items:center!important;gap:3px!important;font-size:10px!important;color:var(--tm)!important;font-family:var(--fm)!important;white-space:nowrap!important;overflow:hidden!important;min-width:0!important;}\n#msrR6 .ms-crow svg{flex-shrink:0!important;opacity:.5!important}\n#msrR6 .ms-cval{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}\n\n/* ── Filter panel ── */\n#msrR6 .ms-fp{\n  display:none!important;position:absolute!important;top:44px!important;right:0!important;width:262px!important;\n  background:rgba(255,255,255,.96)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;\n  border-radius:var(--rxl)!important;\n  box-shadow:0 12px 40px rgba(0,0,0,.10),0 0 0 1px rgba(255,255,255,.55)!important;\n  border:1px solid var(--msr-accent-soft)!important;\n  padding:18px 16px 16px!important;z-index:9999!important;\n}\n#msrR6 .ms-fp.ms-open{display:block!important;animation:msrFade6 .18s ease!important}\n@keyframes msrFade6{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n\n#msrR6 .ms-sec{margin-bottom:14px!important}\n#msrR6 .ms-sec:last-child{margin-bottom:0!important}\n#msrR6 .ms-lbl{font-size:10.5px!important;font-weight:600!important;color:var(--msr-accent-text)!important;opacity:.78!important;letter-spacing:.07em!important;text-transform:uppercase!important;margin-bottom:8px!important;display:block!important;}\n#msrR6 .ms-div{height:1px!important;background:var(--msr-accent-soft)!important;margin:12px 0!important}\n\n/* ── 排序方式：兩排 radio（依據 + 方向）── */\n#msrR6 .ms-sort-by{display:flex!important;gap:4px!important;flex-wrap:wrap!important;margin-bottom:8px!important;}\n#msrR6 .ms-sort-dir{display:flex!important;gap:4px!important;flex-wrap:wrap!important;}\n#msrR6 .ms-sort-dir .ms-sbtn{\n  font-size:11px!important;\n  padding:3px 9px!important;\n  opacity:.75!important;\n  border-color:var(--bdl)!important;\n  color:#888!important;\n}\n#msrR6 .ms-sort-dir .ms-sbtn:hover{\n  opacity:1!important;\n  border-color:var(--msr-accent)!important;\n  color:var(--msr-accent-text)!important;\n  background:var(--msr-accent-soft)!important;\n}\n#msrR6 .ms-sort-dir .ms-sbtn.active{\n  opacity:1!important;\n  background:var(--msr-accent-soft)!important;\n  border-color:var(--msr-accent)!important;\n  color:var(--msr-accent-text)!important;\n  font-weight:600!important;\n}\n#msrR6 .ms-sort-divider{height:1px!important;background:var(--msr-accent-soft)!important;margin:8px 0!important;}\n\n#msrR6 .ms-sbtn{\n  all:unset!important;\n  display:inline-flex!important;align-items:center!important;\n  font-size:12px!important;color:#666!important;cursor:pointer!important;\n  font-family:var(--fb)!important;line-height:1.5!important;\n  padding:4px 11px!important;border-radius:99px!important;\n  border:1px solid var(--msr-accent-soft)!important;background:#fff!important;\n  transition:all .15s!important;white-space:nowrap!important;\n}\n#msrR6 .ms-sbtn:hover{border-color:var(--msr-accent)!important;color:var(--msr-accent-text)!important;background:var(--msr-accent-soft)!important;}\n#msrR6 .ms-sbtn.active{background:var(--msr-accent-soft)!important;border-color:var(--msr-accent)!important;color:var(--msr-accent-text)!important;font-weight:600!important;}\n\n/* ── 方向說明小字 ── */\n#msrR6 .ms-dir-hint{font-size:10px!important;color:var(--tm)!important;margin-bottom:6px!important;display:block!important;font-family:var(--fm)!important;}\n\n/* Media type pills */\n#msrR6 .ms-tgrp{display:flex!important;gap:6px!important;flex-wrap:wrap!important}\n#msrR6 .ms-tpill{all:unset!important;display:inline-flex!important;align-items:center!important;gap:4px!important;font-size:12px!important;color:#666!important;cursor:pointer!important;font-family:var(--fb)!important;line-height:1.5!important;padding:4px 12px!important;border-radius:99px!important;border:1px solid var(--msr-accent-soft)!important;background:#fff!important;transition:all .15s!important;}\n#msrR6 .ms-tpill:hover{border-color:var(--msr-accent)!important;color:var(--msr-accent-text)!important;background:var(--msr-accent-soft)!important;}\n#msrR6 .ms-tpill.active{background:var(--msr-accent-soft)!important;border-color:var(--msr-accent)!important;color:var(--msr-accent-text)!important;font-weight:600!important;}\n#msrR6 .ms-tpill .ms-chk{display:none!important}\n\n/* Date row */\n#msrR6 .ms-drow{display:flex!important;align-items:center!important;gap:8px!important;background:#f8f8f9!important;border:1px solid var(--msr-accent-soft)!important;border-radius:9px!important;padding:8px 11px!important;cursor:pointer!important;transition:border-color .15s!important;margin-bottom:6px!important;user-select:none!important;}\n#msrR6 .ms-drow:hover,#msrR6 .ms-drow.open{border-color:var(--msr-accent)!important;background:var(--msr-accent-soft)!important;}\n#msrR6 .ms-dtxt{flex:1!important;font-size:11.5px!important;font-weight:500!important;color:#666!important;font-family:var(--fm)!important;}\n#msrR6 .ms-drow.open .ms-dtxt{color:var(--msr-accent-text)!important;}\n#msrR6 .ms-darr{font-size:10px!important;color:var(--tm)!important;transition:transform .15s!important;line-height:1!important;}\n#msrR6 .ms-drow.open .ms-darr{transform:rotate(180deg)!important}\n\n/* Time mode tabs */\n#msrR6 .ms-ttabs{display:flex!important;gap:3px!important;margin-bottom:8px!important;background:#f6f6f7!important;border-radius:9px!important;padding:3px!important;}\n#msrR6 .ms-ttab{all:unset!important;flex:1!important;text-align:center!important;padding:5px!important;border-radius:7px!important;font-size:11.5px!important;font-weight:500!important;cursor:pointer!important;color:#9aa0a6!important;transition:all .15s!important;font-family:var(--fb)!important;line-height:1.4!important;}\n#msrR6 .ms-ttab.active{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;box-shadow:none!important;}\n\n/* Calendar */\n#msrR6 .ms-calwrap{display:none!important;border:1px solid var(--msr-accent-soft)!important;border-radius:12px!important;overflow:hidden!important;margin-top:4px!important}\n#msrR6 .ms-calwrap.vis{display:block!important;animation:msrFade6 .15s ease!important}\n#msrR6 .ms-cal{font-size:12px!important;user-select:none!important;background:var(--sf)!important;}\n#msrR6 .ms-cal-hdr{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:10px 12px 8px!important;border-bottom:1px solid var(--msr-accent-soft)!important;}\n#msrR6 .ms-cal-nav{all:unset!important;width:24px!important;height:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;border-radius:6px!important;color:var(--ts)!important;font-size:16px!important;transition:background .12s!important;font-family:var(--fb)!important;line-height:1!important;flex-shrink:0!important;}\n#msrR6 .ms-cal-nav:hover{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-cal-mlbl{all:unset!important;font-size:12.5px!important;font-weight:600!important;color:var(--tp)!important;cursor:pointer!important;padding:3px 8px!important;border-radius:7px!important;transition:background .12s!important;font-family:var(--fb)!important;display:flex!important;align-items:center!important;gap:4px!important;line-height:1.4!important;}\n#msrR6 .ms-cal-mlbl:hover{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-cal-mlbl-arr{font-size:9px!important;color:var(--tm)!important;transition:transform .15s!important}\n#msrR6 .ms-cal-mlbl.pick-open .ms-cal-mlbl-arr{transform:rotate(180deg)!important}\n#msrR6 .ms-ympick{display:none!important;padding:10px!important;background:var(--sf)!important;}\n#msrR6 .ms-ympick.vis{display:block!important}\n#msrR6 .ms-ym-yr-row{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:8px!important;}\n#msrR6 .ms-ym-yr-nav{all:unset!important;width:24px!important;height:24px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;border-radius:6px!important;color:var(--ts)!important;font-size:15px!important;transition:background .12s!important;font-family:var(--fb)!important;line-height:1!important;}\n#msrR6 .ms-ym-yr-nav:hover{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-ym-yr-lbl{all:unset!important;font-size:13px!important;font-weight:600!important;color:var(--tp)!important;cursor:pointer!important;padding:3px 8px!important;border-radius:7px!important;transition:background .12s!important;font-family:var(--fb)!important;display:flex!important;align-items:center!important;gap:3px!important;line-height:1.4!important;}\n#msrR6 .ms-ym-yr-lbl:hover{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-ym-yr-lbl::after{content:\'▾\'!important;font-size:9px!important;color:var(--tm)!important}\n#msrR6 .ms-ym-yr-lbl.yr-open::after{content:\'▴\'!important}\n#msrR6 .ms-ym-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important;}\n#msrR6 .ms-yr-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:4px!important;margin-top:6px!important;}\n#msrR6 .ms-ym-cell{all:unset!important;text-align:center!important;padding:7px 4px!important;border-radius:8px!important;font-size:12px!important;cursor:pointer!important;color:var(--ts)!important;transition:background .1s!important;font-family:var(--fb)!important;line-height:1.4!important;display:block!important;}\n#msrR6 .ms-ym-cell:hover{background:var(--msr-accent-soft)!important;}\n#msrR6 .ms-ym-cell.active{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;border:1px solid var(--msr-accent)!important;font-weight:600!important;}\n#msrR6 .ms-cal-body{padding:8px 10px 10px!important;}\n#msrR6 .ms-cal-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:0!important;width:100%!important;}\n#msrR6 .ms-cal-dow{text-align:center!important;font-size:10px!important;color:var(--tm)!important;padding:2px 0 5px!important;font-weight:500!important;}\n#msrR6 .ms-cal-day{all:unset!important;text-align:center!important;font-size:11.5px!important;padding:4px 1px!important;border-radius:6px!important;cursor:pointer!important;color:var(--ts)!important;transition:background .1s!important;font-family:var(--fb)!important;line-height:1.6!important;display:block!important;width:100%!important;}\n#msrR6 .ms-cal-day:hover:not(.emp){background:var(--sf2)!important}\n#msrR6 .ms-cal-day.tdy{font-weight:700!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-cal-day.sel{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;font-weight:600!important;}\n#msrR6 .ms-cal-day.rng{background:rgba(0,0,0,.03)!important;border-radius:0!important;}\n#msrR6 .ms-cal-day.rs{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;font-weight:600!important;border-radius:6px 0 0 6px!important;}\n#msrR6 .ms-cal-day.re{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;font-weight:600!important;border-radius:0 6px 6px 0!important;}\n#msrR6 .ms-cal-day.oth{color:var(--tm)!important;opacity:.35!important}\n#msrR6 .ms-cal-day.emp{cursor:default!important}\n#msrR6 .ms-cal-foot{display:flex!important;justify-content:space-between!important;padding:8px 12px 10px!important;border-top:1px solid var(--msr-accent-soft)!important;}\n#msrR6 .ms-cal-act{all:unset!important;font-size:12px!important;font-weight:500!important;color:var(--ts)!important;cursor:pointer!important;font-family:var(--fb)!important;padding:3px 8px!important;border-radius:6px!important;transition:background .1s,color .1s!important;}\n#msrR6 .ms-cal-act:hover{background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n\n/* Dual range */\n#msrR6 .ms-drng{position:relative!important;height:24px!important;display:flex!important;align-items:center!important;margin-top:6px!important;}\n#msrR6 .ms-dtrk{position:absolute!important;left:0!important;right:0!important;height:2px!important;background:var(--sf3)!important;border-radius:99px!important;pointer-events:none!important;}\n#msrR6 .ms-dfil{position:absolute!important;height:2px!important;background:var(--msr-accent-text)!important;border-radius:99px!important;pointer-events:none!important;}\n#msrR6 .ms-drng input[type=range]{position:absolute!important;width:100%!important;height:2px!important;-webkit-appearance:none!important;appearance:none!important;background:transparent!important;outline:none!important;cursor:pointer!important;pointer-events:none!important;margin:0!important;}\n#msrR6 .ms-drng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;width:16px!important;height:16px!important;border-radius:50%!important;background:var(--msr-accent-text)!important;cursor:pointer!important;box-shadow:0 1px 4px rgba(0,0,0,.18)!important;pointer-events:all!important;border:2.5px solid #fff!important;}\n#msrR6 .ms-rval{display:flex!important;justify-content:space-between!important;font-size:11px!important;font-weight:600!important;color:var(--msr-accent-text)!important;margin-bottom:1px!important;font-family:var(--fm)!important;}\n#msrR6 .ms-rlbls{display:flex!important;justify-content:space-between!important;font-size:9.5px!important;color:var(--tm)!important;margin-top:5px!important;}\n#msrR6 .ms-unlim{all:unset!important;display:inline-flex!important;align-items:center!important;gap:4px!important;padding:4px 12px!important;border-radius:99px!important;border:1px solid var(--msr-accent-soft)!important;background:#fff!important;font-size:11px!important;color:var(--tm)!important;cursor:pointer!important;transition:all .15s!important;font-family:var(--fb)!important;font-weight:500!important;line-height:1.4!important;margin-top:8px!important;}\n#msrR6 .ms-unlim:hover{border-color:var(--msr-accent)!important;color:var(--msr-accent-text)!important;background:var(--msr-accent-soft)!important;}\n#msrR6 .ms-unlim.active{border-color:var(--msr-accent)!important;background:var(--msr-accent-soft)!important;color:var(--msr-accent-text)!important;}\n#msrR6 .ms-apply{all:unset!important;display:block!important;width:100%!important;text-align:center!important;padding:10px!important;border-radius:10px!important;background:var(--msr-accent-text)!important;color:#fff!important;font-size:13px!important;font-weight:600!important;cursor:pointer!important;letter-spacing:.02em!important;transition:opacity .15s!important;margin-top:10px!important;font-family:var(--fb)!important;line-height:1.4!important;}\n#msrR6 .ms-apply:hover{opacity:.9!important;}\n\n/* pending note */\n#msrR6 .ms-sec-pending-note{font-size:10px!important;color:#aeaeb2!important;margin-top:5px!important;display:block!important;}\n\n/* ── Recently Viewed sidebar ── */\n#msrR6 .ms-rv{width:320px!important;flex-shrink:0!important;background:var(--sf)!important;border-radius:var(--rxl)!important;box-shadow:var(--sh2)!important;padding:20px 18px!important;align-self:flex-start!important;border:1px solid var(--bdl)!important;}\n#msrR6 .ms-rvhd{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:14px!important;}\n#msrR6 .ms-rvt{font-size:13px!important;font-weight:600!important;color:var(--tp)!important;letter-spacing:-0.01em!important;}\n#msrR6 .ms-rva{font-size:11.5px!important;color:var(--msr-accent-text)!important;opacity:.58!important;cursor:pointer!important;text-decoration:none!important;font-weight:400!important;transition:color .15s ease,opacity .15s ease!important;}\n#msrR6 .ms-rva:hover{opacity:.95!important;background:transparent!important;}\n#msrR6 .ms-rvi{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:10px 8px!important;margin:0 -8px!important;border-bottom:1px solid var(--bdl)!important;cursor:pointer!important;border-radius:12px!important;transition:background .18s ease,opacity .18s ease!important;}\n#msrR6 .ms-rvi:last-child{border-bottom:none!important;padding-bottom:0!important;}\n#msrR6 .ms-rvi:hover{background:var(--msr-accent-soft)!important;opacity:1!important;}\n#msrR6 .ms-rvi:hover .ms-rvthumb{box-shadow:0 0 0 1px var(--msr-accent) inset!important;}\n#msrR6 .ms-rvi:hover .ms-rvname{color:var(--msr-accent-text)!important;}\n#msrR6 .ms-rvi:hover .ms-rvdate,#msrR6 .ms-rvi:hover .ms-rvpath,#msrR6 .ms-rvi:hover .ms-rvdesc{color:rgba(0,0,0,.58)!important;}\n#msrR6 .ms-rvthumb{width:86px!important;height:62px!important;flex-shrink:0!important;border-radius:8px!important;overflow:hidden!important;background:var(--sf3)!important;position:relative!important;display:block!important;}\n#msrR6 .ms-rvthumb img,#msrR6 .ms-rvthumb video{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border:none!important;box-shadow:none!important;max-width:none!important;}\n#msrR6 .ms-rvov{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(0,0,0,.10)!important;opacity:0!important;transition:opacity .2s!important;}\n#msrR6 .ms-rvi:hover .ms-rvov{opacity:1!important}\n#msrR6 .ms-rvov-inner{width:26px!important;height:26px!important;border-radius:50%!important;background:rgba(255,255,255,.22)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;border:1px solid rgba(255,255,255,.38)!important;display:flex!important;align-items:center!important;justify-content:center!important;}\n#msrR6 .ms-rvov-inner svg{width:9px!important;height:9px!important;fill:#fff!important;margin-left:1px!important;}\n#msrR6 .ms-rvdur{position:absolute!important;bottom:3px!important;right:4px!important;font-size:9px!important;color:#fff!important;font-family:var(--fm)!important;background:rgba(0,0,0,.55)!important;padding:1px 4px!important;border-radius:3px!important;line-height:1.4!important;}\n#msrR6 .ms-rvinfo{flex:1!important;min-width:0!important;}\n#msrR6 .ms-rvname{font-size:12.5px!important;font-weight:600!important;color:var(--tp)!important;margin-bottom:3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;letter-spacing:-0.01em!important;}\n#msrR6 .ms-rvdate,#msrR6 .ms-rvpath{font-size:10px!important;color:var(--tm)!important;line-height:1.5!important;font-family:var(--fm)!important;}\n#msrR6 .ms-rvdesc{font-size:11px!important;color:var(--ts)!important;line-height:1.5!important;margin-top:2px!important;}\n#msrR6 .ms-none{grid-column:1/-1!important;text-align:center!important;padding:48px 0!important;font-size:13px!important;color:var(--tm)!important;}\n\n/* ── Modal ── */\n#msrModal6{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.68);align-items:center;justify-content:center;font-family:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,sans-serif;}\n#msrModal6.open{display:flex;animation:msrFade6 .2s ease}\n#msrModal6 .mm-inner{background:#fff;border-radius:22px;overflow:hidden;width:90vw;max-width:800px;box-shadow:0 32px 80px rgba(0,0,0,.32);}\n#msrModal6 .mm-media{position:relative;background:#000;width:100%;}\n#msrModal6 .mm-media video,#msrModal6 .mm-media img{width:100%;max-height:440px;object-fit:contain;display:block;}\n#msrModal6 .mm-info{padding:18px 22px 20px;}\n#msrModal6 .mm-info h3{font-size:15px;font-weight:600;color:#1a1a1a;margin:0 0 4px;font-family:inherit;letter-spacing:-0.02em;}\n#msrModal6 .mm-info p{font-size:12px;color:#6e6e73;margin:0;font-family:inherit;}\n#msrModal6 .mm-snip{color:#aeaeb2;margin-top:4px;font-size:12px;line-height:1.55;}\n#msrModal6 .mm-meta{display:flex;gap:12px;margin-top:10px;font-size:11.5px;color:#aeaeb2;flex-wrap:wrap;font-family:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;}\n#msrModal6 .mm-acts{display:flex;gap:10px;margin-top:16px;}\n#msrModal6 .mm-btn-sec{all:unset;display:inline-flex;align-items:center;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;font-family:\'Instrument Sans\',\'Noto Sans TC\',sans-serif;background:#f2f2f4;color:#1a1a1a;border:1px solid #e8e8ea;transition:background .15s;}\n#msrModal6 .mm-btn-sec:hover{background:#e8e8ea;}\n</style>\n\n<div id=\"msrR6\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-panel\">\n      <div class=\"ms-hdr\">\n        <button class=\"ms-back\" id=\"msrBackBtn6\">&#8249;</button>\n        <span class=\"ms-ttl\">以下是找到符合 <strong id=\"msrQueryLbl6\">風景</strong> 的照片與影片</span>\n        <div class=\"ms-fa\">\n          <button class=\"ms-fbtn\" id=\"msrFBtn6\">\n            <svg width=\"15\" height=\"11\" viewBox=\"0 0 15 11\" fill=\"none\">\n              <rect y=\"0\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"#aeaeb2\"/>\n              <rect y=\"4.6\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"#aeaeb2\"/>\n              <rect y=\"9.2\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"#aeaeb2\"/>\n            </svg>\n          </button>\n          <div class=\"ms-fp\" id=\"msrFP6\">\n\n            <!-- 排序方式 -->\n            <div class=\"ms-sec\">\n              <span class=\"ms-lbl\">排序方式</span>\n              <!-- 第一排：依據 -->\n              <div class=\"ms-sort-by\">\n                <button class=\"ms-sbtn active\" data-sort-by=\"time\">時間</button>\n                <button class=\"ms-sbtn\" data-sort-by=\"size\">檔案大小</button>\n                <button class=\"ms-sbtn\" data-sort-by=\"name\">檔名</button>\n              </div>\n              <div class=\"ms-sort-divider\"></div>\n              <!-- 第二排：方向，無標題，文字隨依據動態更新 -->\n              <div class=\"ms-sort-dir\">\n                <button class=\"ms-sbtn active\" data-sort-dir=\"asc\" id=\"msrDirAsc6\">舊 → 新</button>\n                <button class=\"ms-sbtn\" data-sort-dir=\"desc\" id=\"msrDirDesc6\">新 → 舊</button>\n              </div>\n            </div>\n\n            <div class=\"ms-div\"></div>\n\n            <!-- 過濾方式 -->\n            <div class=\"ms-sec\">\n              <span class=\"ms-lbl\">過濾方式</span>\n              <div class=\"ms-tgrp\">\n                <button class=\"ms-tpill\" data-type=\"image\"><span class=\"ms-chk\"></span>照片</button>\n                <button class=\"ms-tpill\" data-type=\"video\"><span class=\"ms-chk\"></span>影片</button>\n              </div>\n            </div>\n\n            <div class=\"ms-div\"></div>\n\n            <!-- 時間 -->\n            <div class=\"ms-sec\">\n              <span class=\"ms-lbl\">時間</span>\n              <div class=\"ms-ttabs\">\n                <button class=\"ms-ttab active\" data-mode=\"Range\">區間</button>\n                <button class=\"ms-ttab\" data-mode=\"Before\">之前</button>\n                <button class=\"ms-ttab\" data-mode=\"After\">之後</button>\n              </div>\n              <div class=\"ms-drow\" id=\"msrDRow6\">\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"#aeaeb2\" stroke-width=\"1.5\"><rect x=\"1\" y=\"2\" width=\"12\" height=\"11\" rx=\"2\"/><path d=\"M1 5.5h12M4.5 1v2M9.5 1v2\"/></svg>\n                <span class=\"ms-dtxt\" id=\"msrDTxt6\">— ～ —</span>\n                <span class=\"ms-darr\">▾</span>\n              </div>\n              <div class=\"ms-calwrap\" id=\"msrCalWrap6\">\n                <div class=\"ms-cal\">\n                  <div class=\"ms-cal-hdr\">\n                    <button class=\"ms-cal-nav\" id=\"msrCalPrev6\">&#8249;</button>\n                    <button class=\"ms-cal-mlbl\" id=\"msrCalMLbl6\"><span id=\"msrCalMLblTxt6\"></span><span class=\"ms-cal-mlbl-arr\">▾</span></button>\n                    <button class=\"ms-cal-nav\" id=\"msrCalNext6\">&#8250;</button>\n                  </div>\n                  <div class=\"ms-ympick\" id=\"msrYMPick6\">\n                    <div class=\"ms-ym-yr-row\">\n                      <button class=\"ms-ym-yr-nav\" id=\"msrYMYrPrev6\">&#8249;</button>\n                      <button class=\"ms-ym-yr-lbl\" id=\"msrYMYrLbl6\"></button>\n                      <button class=\"ms-ym-yr-nav\" id=\"msrYMYrNext6\">&#8250;</button>\n                    </div>\n                    <div class=\"ms-ym-grid\" id=\"msrYMGrid6\"></div>\n                  </div>\n                  <div class=\"ms-cal-body\" id=\"msrCalBody6\">\n                    <div class=\"ms-cal-grid\" id=\"msrCalGrid6\"></div>\n                  </div>\n                  <div class=\"ms-cal-foot\">\n                    <button class=\"ms-cal-act\" id=\"msrCalClear6\">清除</button>\n                    <button class=\"ms-cal-act\" id=\"msrCalToday6\">今天</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"ms-div\"></div>\n\n            <!-- 檔案大小（待 API）-->\n            <div class=\"ms-sec\">\n              <span class=\"ms-lbl\">檔案大小</span>\n              <div class=\"ms-rval\"><span id=\"msrSzMin6\">—</span><span id=\"msrSzMax6\">—</span></div>\n              <div class=\"ms-drng\"><div class=\"ms-dtrk\"></div><div class=\"ms-dfil\" id=\"msrSzFil6\"></div><input type=\"range\" id=\"msrSzA6\" min=\"0\" max=\"100\" value=\"0\"><input type=\"range\" id=\"msrSzB6\" min=\"0\" max=\"100\" value=\"100\"></div>\n              <div class=\"ms-rlbls\"><span>1 MB 以下</span><span>100 GB+</span></div>\n              <button class=\"ms-unlim\" id=\"msrSzUnlim6\">∞ 不限大小</button>\n            </div>\n\n            <!-- 影片時長（待 API）-->\n            <div class=\"ms-sec\">\n              <span class=\"ms-lbl\">影片時長</span>\n              <div class=\"ms-rval\"><span id=\"msrDrMin6\">—</span><span id=\"msrDrMax6\">—</span></div>\n              <div class=\"ms-drng\"><div class=\"ms-dtrk\"></div><div class=\"ms-dfil\" id=\"msrDrFil6\"></div><input type=\"range\" id=\"msrDrA6\" min=\"0\" max=\"100\" value=\"0\"><input type=\"range\" id=\"msrDrB6\" min=\"0\" max=\"100\" value=\"100\"></div>\n              <div class=\"ms-rlbls\"><span>3 秒以下</span><span>3 小時以上</span></div>\n              <button class=\"ms-unlim\" id=\"msrDrUnlim6\">∞ 不限時長</button>\n            </div>\n\n            <button class=\"ms-apply\" id=\"msrApply6\">套用篩選</button>\n          </div>\n        </div>\n      </div>\n      <div class=\"ms-grid\" id=\"msrGrid6\"></div>\n    </div>\n    <aside class=\"ms-rv\">\n      <div class=\"ms-rvhd\"><span class=\"ms-rvt\">Recently Viewed</span><a class=\"ms-rva\" href=\"#\">查看全部</a></div>\n      <div id=\"msrRVList6\"></div>\n    </aside>\n  </div>\n</div>\n\n<div id=\"msrModal6\">\n  <div class=\"mm-inner\">\n    <div class=\"mm-media\"><div id=\"msrMMedia6\"></div></div>\n    <div class=\"mm-info\">\n      <h3 id=\"msrMTitle6\"></h3>\n      <p id=\"msrMPath6\"></p>\n      <p class=\"mm-snip\" id=\"msrMSnip6\"></p>\n      <div class=\"mm-meta\" id=\"msrMMeta6\"></div>\n      <div class=\"mm-acts\">\n        <button class=\"mm-btn-sec\" id=\"msrMClose6\">關閉</button>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','search-results','','inherit','closed','closed','','514-revision-v1','','','2026-05-21 02:04:21','2026-05-21 02:04:21','',514,'https://m5wp.momentry.ddns.net/?p=1610',0,'revision','',0),
(1611,4,'2026-05-21 03:18:18','2026-05-21 03:18:18','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n          stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-21 03:18:18','2026-05-21 03:18:18','',1359,'https://m5wp.momentry.ddns.net/?p=1611',0,'revision','',0),
(1612,1,'2026-05-21 05:17:48','2026-05-21 05:17:48','<!-- wp:shortcode -->\n[raptor_api_dashboard_v1]\n<!-- /wp:shortcode -->','Raptor API Test Lab','','publish','closed','closed','','raptor-api-console','','','2026-05-22 03:42:30','2026-05-22 03:42:30','',0,'https://m5wp.momentry.ddns.net/?page_id=1612',0,'page','',0),
(1613,1,'2026-05-21 05:17:41','2026-05-21 05:17:41','<!-- wp:shortcode /-->','Raptor API Test Lab','','inherit','closed','closed','','1612-revision-v1','','','2026-05-21 05:17:41','2026-05-21 05:17:41','',1612,'https://m5wp.momentry.ddns.net/?p=1613',0,'revision','',0),
(1614,1,'2026-05-21 05:17:49','2026-05-21 05:17:49','<!-- wp:shortcode -->\n[raptor_api_test_lab]\n<!-- /wp:shortcode -->','Raptor API Test Lab','','inherit','closed','closed','','1612-revision-v1','','','2026-05-21 05:17:49','2026-05-21 05:17:49','',1612,'https://m5wp.momentry.ddns.net/?p=1614',0,'revision','',0),
(1615,1,'2026-05-21 06:12:57','2026-05-21 06:12:57','<!-- wp:shortcode -->\n[raptor_api_dashboard_v1]\n<!-- /wp:shortcode -->','Raptor API Test Lab','','inherit','closed','closed','','1612-revision-v1','','','2026-05-21 06:12:57','2026-05-21 06:12:57','',1612,'https://m5wp.momentry.ddns.net/?p=1615',0,'revision','',0),
(1617,4,'2026-05-22 05:44:54','2026-05-22 05:44:54','<!-- wp:html -->\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n.wp-block-html,.entry-content .wp-block-html,.wp-block-html>*,.entry-content>.wp-block-html{max-width:none!important;width:100%!important}\n.entry-content,.post-content,.page-content,.wp-block-post-content,.is-layout-constrained>*,.is-layout-flow>*,.editor-styles-wrapper .is-layout-constrained>*{max-width:none!important}\n.site-main,.site-content,.content-area,.ast-container,.container,.wp-site-blocks,main.wp-block-group{max-width:100%!important}\n\n#msPlayerRoot,#msPlayerRoot *,#msPlayerRoot *::before,#msPlayerRoot *::after{box-sizing:border-box}\n#msPlayerRoot *{margin:0;padding:0}\n\n#msPlayerRoot{\n  --bg:#f5f5f7;--surface:#ffffff;--surface-2:#f2f2f4;--surface-3:#e8e8ea;\n  --text-1:#1a1a1a;--text-2:#6e6e73;--text-3:#aeaeb2;\n  --border:#d8d8dc;--border-light:#e8e8ea;\n  --sync-accent:#e8724a;--sync-accent-light:#fde8df;--sync-accent-dark:#c95c38;\n  --sync-accent-border:rgba(232,114,74,.22);--sync-accent-shadow:rgba(232,114,74,.16);\n  --radius:12px;--radius-lg:18px;--radius-xl:22px;--panel-w:340px;\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);\n  --shadow-md:0 4px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);\n  --shadow-lg:0 12px 40px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);\n  width:100vw;margin-left:calc(50% - 50vw);\n  background:var(--bg);color:var(--text-1);font-family:var(--font);-webkit-font-smoothing:antialiased;\n}\n\n#msPlayerRoot .page{\n  min-height:100vh;width:100%;max-width:1400px;margin:0 auto;\n  padding:16px 20px 40px;display:flex;flex-direction:column;\n}\n#msPlayerRoot .topbar{margin-bottom:16px}\n#msPlayerRoot .back-btn{\n  width:36px;height:36px;border-radius:50%;\n  background:var(--sync-accent-light);border:1px solid var(--sync-accent-border);\n  display:inline-flex;align-items:center;justify-content:center;\n  font-size:20px;cursor:pointer;\n  transition:background .15s,transform .15s,color .15s,border-color .15s;\n  user-select:none;box-shadow:0 2px 8px var(--sync-accent-shadow);\n  text-decoration:none;color:var(--sync-accent-dark);\n}\n#msPlayerRoot .back-btn:hover{background:var(--sync-accent);color:#fff;border-color:var(--sync-accent);transform:translateY(-1px);}\n\n/* ===== body-row: 桌面橫排，中/小螢幕直排 ===== */\n#msPlayerRoot .body-row{\n  display:flex;\n  flex-direction:row;\n  gap:18px;\n  align-items:flex-start;\n  flex:1;\n  width:100%;\n}\n\n/* left-col 固定撐滿剩餘空間，不讓 flex 壓縮 */\n#msPlayerRoot .left-col{\n  flex:1 1 0%;\n  min-width:0;\n  width:0; /* 搭配 flex:1 讓它真的從 0 開始計算，不被 content 撐開 */\n  display:flex;\n  flex-direction:column;\n  gap:16px;\n}\n\n/* ===== VIEWER: 固定 16:9，內容 absolute 填滿 ===== */\n#msPlayerRoot .viewer{\n  position:relative;\n  border-radius:var(--radius-lg);\n  overflow:hidden;\n  background:#000;\n  width:100%;\n  aspect-ratio:16/9;\n  min-height:0;\n  box-shadow:var(--shadow-md);\n  /* 防止 WordPress 主題的全域樣式干擾高度 */\n  height:auto !important;\n  max-height:none !important;\n}\n/* 舊瀏覽器 fallback */\n@supports not (aspect-ratio: 16/9){\n  #msPlayerRoot .viewer::before{content:\'\';display:block;padding-top:56.25%;}\n}\n#msPlayerRoot .viewer video,\n#msPlayerRoot .viewer img.main-img{\n  position:absolute;\n  top:0;left:0;\n  width:100%;height:100%;\n  display:block;\n  background:#000;\n}\n#msPlayerRoot .viewer video{object-fit:contain;}\n#msPlayerRoot .viewer img.main-img{object-fit:cover;}\n#msPlayerRoot .img-overlay{\n  position:absolute;inset:0;\n  background:linear-gradient(to bottom,transparent 70%,rgba(0,0,0,.12));\n  pointer-events:none;\n}\n\n/* ===== meta ===== */\n#msPlayerRoot .meta h2{font-size:20px;font-weight:600;letter-spacing:-0.4px;line-height:1.3;color:var(--text-1);}\n#msPlayerRoot .meta-sub{margin-top:6px;font-size:12px;color:var(--text-2);line-height:1.8;font-family:var(--font-mono);}\n\n/* ===== strip-block ===== */\n#msPlayerRoot .strip-block{position:relative;}\n#msPlayerRoot .strip-header{\n  display:flex;align-items:center;justify-content:space-between;\n  font-size:13px;color:var(--text-2);gap:12px;margin-bottom:12px;\n}\n#msPlayerRoot .strip-header strong{color:var(--text-1);font-weight:600}\n#msPlayerRoot .filter-btn-wrap{flex-shrink:0;}\n#msPlayerRoot .filter-btn{\n  width:34px;height:34px;border-radius:99px;\n  background:var(--sync-accent-light);border:1px solid var(--sync-accent-border);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark);\n  box-shadow:0 2px 8px var(--sync-accent-shadow);\n  transition:background .15s,transform .15s,border-color .15s,color .15s;\n}\n#msPlayerRoot .filter-btn:hover{background:var(--sync-accent);border-color:var(--sync-accent);color:#fff;transform:translateY(-1px);}\n#msPlayerRoot .filter-btn:hover svg rect{fill:#fff !important;}\n\n#msPlayerRoot .strip{\n  display:flex;gap:14px;overflow-x:auto;\n  padding:16px;\n  background:rgba(242,242,244,0.72);\n  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);\n  border:1px solid rgba(216,216,220,0.6);\n  border-radius:var(--radius-lg);\n  scrollbar-width:thin;scrollbar-color:#ccc transparent;\n}\n#msPlayerRoot .strip::-webkit-scrollbar{height:0}\n\n#msPlayerRoot .clip-card{flex-shrink:0;width:148px;cursor:pointer;overflow:visible;transition:transform .18s;}\n#msPlayerRoot .clip-card:hover{transform:translateY(-3px)}\n#msPlayerRoot .clip-card.active .clip-thumb-wrap{outline:2px solid rgba(0,0,0,0.5);outline-offset:-2px;}\n#msPlayerRoot .clip-thumb-wrap{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;background:var(--surface-3);}\n#msPlayerRoot .clip-thumb-wrap img,#msPlayerRoot .clip-thumb-wrap video{width:100%;height:100%;display:block;object-fit:cover;}\n#msPlayerRoot .clip-play-icon{position:absolute;inset:0;background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}\n#msPlayerRoot .clip-card:hover .clip-play-icon{opacity:1}\n#msPlayerRoot .clip-play-icon-inner{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.18);}\n#msPlayerRoot .clip-play-icon-inner svg{width:12px;height:12px;fill:#fff;margin-left:2px;}\n#msPlayerRoot .clip-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);color:#fff;font-size:9px;font-weight:500;padding:2px 7px;border-radius:4px;}\n#msPlayerRoot .clip-dur{position:absolute;bottom:5px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;font-family:var(--font-mono);padding:1px 5px;border-radius:3px;}\n#msPlayerRoot .clip-info{padding:8px 2px 0}\n#msPlayerRoot .clip-title{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text-1);letter-spacing:-0.01em;}\n#msPlayerRoot .clip-sub{font-size:10px;color:var(--text-3);margin-top:2px;line-height:1.5;font-family:var(--font-mono);}\n\n/* ===== Filter panel ===== */\n#msPlayerRoot .msr-filter-panel{\n  display:none;\n  position:absolute;\n  bottom:calc(100% - 44px);\n  right:0;\n  width:262px;\n  background:rgba(255,255,255,0.96);\n  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\n  border-radius:var(--radius-xl);\n  box-shadow:0 12px 40px rgba(0,0,0,.10),0 0 0 1px rgba(255,255,255,.55);\n  border:1px solid var(--sync-accent-border);\n  padding:18px 16px 16px;\n  z-index:9999;\n  overflow-y:auto;overflow-x:hidden;\n  max-height:80vh;\n}\n#msPlayerRoot .msr-filter-panel.msr-open{display:block;animation:fpFadeIn .18s ease;}\n@keyframes fpFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}\n\n#msPlayerRoot .fp-sec{margin-bottom:14px}\n#msPlayerRoot .fp-sec:last-child{margin-bottom:0}\n#msPlayerRoot .fp-lbl{font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px;display:block;}\n#msPlayerRoot .fp-div{height:1px;background:var(--border-light);margin:12px 0}\n\n#msPlayerRoot .fp-sort-by{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;}\n#msPlayerRoot .fp-sort-divider{height:1px;background:var(--border-light);margin:6px 0;}\n#msPlayerRoot .fp-sort-dir{display:flex;gap:4px;flex-wrap:wrap;}\n#msPlayerRoot .fp-sbtn{all:unset;display:inline-flex;align-items:center;font-size:12px;color:var(--text-2);cursor:pointer;font-family:var(--font);line-height:1.5;padding:4px 11px;border-radius:99px;border:1px solid var(--border);background:var(--surface);transition:all .15s;white-space:nowrap;}\n#msPlayerRoot .fp-sbtn:hover{border-color:var(--sync-accent-border);color:var(--sync-accent-dark);background:var(--sync-accent-light);}\n#msPlayerRoot .fp-sbtn.active{background:var(--sync-accent-light);border-color:var(--sync-accent-border);color:var(--sync-accent-dark);font-weight:600;}\n#msPlayerRoot .fp-sort-dir .fp-sbtn{font-size:11px;padding:3px 9px;opacity:.75;border-color:var(--border-light);color:#888;}\n#msPlayerRoot .fp-sort-dir .fp-sbtn:hover{opacity:1;border-color:var(--sync-accent-border);color:var(--sync-accent-dark);background:var(--sync-accent-light);}\n#msPlayerRoot .fp-sort-dir .fp-sbtn.active{opacity:1;background:var(--sync-accent-light);border-color:var(--sync-accent-border);color:var(--sync-accent-dark);font-weight:600;}\n\n#msPlayerRoot .fp-pending-note{font-size:10px;color:var(--text-3);margin-top:5px;display:block;}\n\n#msPlayerRoot .fp-tgrp{display:flex;gap:6px;flex-wrap:wrap}\n#msPlayerRoot .fp-tpill{all:unset;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);cursor:pointer;font-family:var(--font);line-height:1.5;padding:4px 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface);transition:all .15s;}\n#msPlayerRoot .fp-tpill:hover{border-color:var(--sync-accent-border);background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-tpill.active{background:var(--sync-accent);color:#fff;border-color:var(--sync-accent);}\n#msPlayerRoot .fp-tpill .fp-chk{display:none}\n\n#msPlayerRoot .fp-drow{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border-light);border-radius:9px;padding:8px 11px;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:6px;user-select:none;}\n#msPlayerRoot .fp-drow:hover,#msPlayerRoot .fp-drow.open{border-color:var(--sync-accent);background:color-mix(in srgb,var(--sync-accent-light) 45%,white);}\n#msPlayerRoot .fp-dtxt{flex:1;font-size:12px;font-weight:500;color:var(--text-2);font-family:var(--font-mono);}\n#msPlayerRoot .fp-darr{font-size:10px;color:var(--text-3);transition:transform .15s}\n#msPlayerRoot .fp-drow.open .fp-darr{transform:rotate(180deg)}\n\n#msPlayerRoot .fp-ttabs{display:flex;gap:3px;margin-bottom:8px;background:var(--surface-2);border-radius:9px;padding:3px;}\n#msPlayerRoot .fp-ttab{all:unset;flex:1;text-align:center;padding:5px;border-radius:7px;font-size:11.5px;font-weight:500;cursor:pointer;color:var(--text-3);transition:all .15s;font-family:var(--font);line-height:1.4;}\n#msPlayerRoot .fp-ttab.active{background:var(--sync-accent-light);color:var(--sync-accent-dark);box-shadow:0 1px 4px var(--sync-accent-shadow);}\n\n#msPlayerRoot .fp-calwrap{display:none;border:1px solid var(--border-light);border-radius:12px;overflow:hidden;margin-top:4px;}\n#msPlayerRoot .fp-calwrap.vis{display:block;animation:fpFadeIn .15s ease}\n#msPlayerRoot .fp-cal{font-size:12px;user-select:none;background:var(--surface)}\n#msPlayerRoot .fp-cal-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;border-bottom:1px solid var(--border-light);}\n#msPlayerRoot .fp-cal-nav{all:unset;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;color:var(--text-2);font-size:16px;transition:background .12s,color .12s;font-family:var(--font);line-height:1;flex-shrink:0;}\n#msPlayerRoot .fp-cal-nav:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-cal-mlbl{all:unset;font-size:12.5px;font-weight:600;color:var(--text-1);cursor:pointer;padding:3px 8px;border-radius:7px;transition:background .12s,color .12s;font-family:var(--font);display:flex;align-items:center;gap:4px;line-height:1.4;}\n#msPlayerRoot .fp-cal-mlbl:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-cal-mlbl-arr{font-size:9px;color:var(--text-3);transition:transform .15s}\n#msPlayerRoot .fp-cal-mlbl.pick-open .fp-cal-mlbl-arr{transform:rotate(180deg)}\n#msPlayerRoot .fp-ympick{display:none;padding:10px;background:var(--surface)}\n#msPlayerRoot .fp-ympick.vis{display:block}\n#msPlayerRoot .fp-ym-yr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}\n#msPlayerRoot .fp-ym-yr-nav{all:unset;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;color:var(--text-2);font-size:15px;transition:background .12s,color .12s;font-family:var(--font);line-height:1;}\n#msPlayerRoot .fp-ym-yr-nav:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-ym-yr-lbl{all:unset;font-size:13px;font-weight:600;color:var(--text-1);cursor:pointer;padding:3px 8px;border-radius:7px;transition:background .12s,color .12s;font-family:var(--font);display:flex;align-items:center;gap:3px;line-height:1.4;}\n#msPlayerRoot .fp-ym-yr-lbl:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-ym-yr-lbl::after{content:\'▾\';font-size:9px;color:var(--text-3)}\n#msPlayerRoot .fp-ym-yr-lbl.yr-open::after{content:\'▴\'}\n#msPlayerRoot .fp-ym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}\n#msPlayerRoot .fp-ym-cell{all:unset;text-align:center;padding:7px 4px;border-radius:8px;font-size:12px;cursor:pointer;color:var(--text-2);transition:background .1s,color .1s;font-family:var(--font);line-height:1.4;display:block;}\n#msPlayerRoot .fp-ym-cell:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-ym-cell.active{background:var(--sync-accent);color:#fff;font-weight:600;}\n#msPlayerRoot .fp-cal-body{padding:8px 10px 10px}\n#msPlayerRoot .fp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;width:100%}\n#msPlayerRoot .fp-cal-dow{text-align:center;font-size:10px;color:var(--text-3);padding:2px 0 5px;font-weight:500;}\n#msPlayerRoot .fp-cal-day{all:unset;text-align:center;font-size:11.5px;padding:4px 1px;border-radius:6px;cursor:pointer;color:var(--text-2);transition:background .1s,color .1s;font-family:var(--font);line-height:1.6;display:block;width:100%;}\n#msPlayerRoot .fp-cal-day:hover:not(.emp){background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-cal-day.tdy{font-weight:700;color:var(--text-1)}\n#msPlayerRoot .fp-cal-day.sel{background:var(--sync-accent);color:#fff;font-weight:600;}\n#msPlayerRoot .fp-cal-day.rng{background:color-mix(in srgb,var(--sync-accent-light) 65%,white);border-radius:0;}\n#msPlayerRoot .fp-cal-day.rs{background:var(--sync-accent);color:#fff;font-weight:600;border-radius:6px 0 0 6px;}\n#msPlayerRoot .fp-cal-day.re{background:var(--sync-accent);color:#fff;font-weight:600;border-radius:0 6px 6px 0;}\n#msPlayerRoot .fp-cal-day.oth{color:var(--text-3);opacity:.35}\n#msPlayerRoot .fp-cal-day.emp{cursor:default}\n#msPlayerRoot .fp-cal-foot{display:flex;justify-content:space-between;padding:8px 12px 10px;border-top:1px solid var(--border-light);}\n#msPlayerRoot .fp-cal-act{all:unset;font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:var(--font);padding:3px 8px;border-radius:6px;transition:background .1s,color .1s;}\n#msPlayerRoot .fp-cal-act:hover{background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n\n#msPlayerRoot .fp-drng{position:relative;height:24px;display:flex;align-items:center;margin-top:6px;}\n#msPlayerRoot .fp-dtrk{position:absolute;left:0;right:0;height:2px;background:var(--surface-3);border-radius:99px;pointer-events:none;}\n#msPlayerRoot .fp-dfil{position:absolute;height:2px;background:var(--sync-accent);border-radius:99px;pointer-events:none;}\n#msPlayerRoot .fp-drng input[type=range]{position:absolute;width:100%;height:2px;-webkit-appearance:none;appearance:none;background:transparent;outline:none;cursor:pointer;pointer-events:none;margin:0;}\n#msPlayerRoot .fp-drng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--sync-accent);cursor:pointer;box-shadow:0 1px 4px var(--sync-accent-shadow);pointer-events:all;border:2.5px solid #fff;}\n#msPlayerRoot .fp-rval{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:1px;font-family:var(--font-mono);}\n#msPlayerRoot .fp-rlbls{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-3);margin-top:5px;}\n#msPlayerRoot .fp-unlim{all:unset;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:99px;border:1px solid var(--border);font-size:11px;color:var(--text-3);cursor:pointer;transition:all .15s;font-family:var(--font);font-weight:500;line-height:1.4;margin-top:8px;}\n#msPlayerRoot .fp-unlim:hover{border-color:var(--sync-accent);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-unlim.active{border-color:var(--sync-accent);background:var(--sync-accent-light);color:var(--sync-accent-dark);}\n#msPlayerRoot .fp-apply{all:unset;box-sizing:border-box;display:block;width:100%;text-align:center;padding:10px;border-radius:10px;background:var(--sync-accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:background .15s,transform .15s;margin-top:10px;font-family:var(--font);line-height:1.4;}\n#msPlayerRoot .fp-apply:hover{background:var(--sync-accent-dark);transform:translateY(-1px);}\n\n/* ===== right-panel ===== */\n#msPlayerRoot .right-panel{\n  width:var(--panel-w);\n  min-width:var(--panel-w);\n  background:var(--surface);\n  border-radius:var(--radius-xl);\n  padding:20px 18px;\n  border:1px solid var(--border-light);\n  align-self:flex-start;\n  box-shadow:var(--shadow-md);\n  /* 防止被 flex 壓縮 */\n  flex-shrink:0;\n}\n#msPlayerRoot .rp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;}\n#msPlayerRoot .rp-title{font-size:13px;font-weight:600;letter-spacing:-0.01em;color:var(--text-1);}\n#msPlayerRoot .rp-link{font-size:11.5px;color:var(--sync-accent-dark);opacity:.58;cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:400;transition:opacity .15s ease;}\n#msPlayerRoot .rp-link:hover{opacity:.95;}\n#msPlayerRoot .rc-item{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;margin:0 -8px;cursor:pointer;border-bottom:1px solid var(--border-light);border-radius:12px;transition:background .18s ease,opacity .18s ease;}\n#msPlayerRoot .rc-item:last-child{border-bottom:none;padding-bottom:0;}\n#msPlayerRoot .rc-item:hover{background:var(--sync-accent-light);opacity:1;}\n#msPlayerRoot .rc-item:hover .rc-thumb{box-shadow:0 0 0 1px var(--sync-accent) inset;}\n#msPlayerRoot .rc-item:hover .rc-name{color:var(--sync-accent-dark);}\n#msPlayerRoot .rc-item:hover .rc-date,#msPlayerRoot .rc-item:hover .rc-path,#msPlayerRoot .rc-item:hover .rc-desc{color:rgba(0,0,0,.58);}\n#msPlayerRoot .rc-thumb{width:90px;height:64px;border-radius:8px;flex-shrink:0;overflow:hidden;position:relative;background:var(--surface-3);}\n#msPlayerRoot .rc-thumb img,#msPlayerRoot .rc-thumb video{width:100%;height:100%;object-fit:cover;display:block;}\n#msPlayerRoot .rc-play-icon{position:absolute;inset:0;background:rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}\n#msPlayerRoot .rc-item:hover .rc-play-icon{opacity:1}\n#msPlayerRoot .rc-play-icon-inner{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;}\n#msPlayerRoot .rc-play-icon-inner svg{width:10px;height:10px;fill:#fff;margin-left:1px;}\n#msPlayerRoot .rc-dur{position:absolute;bottom:3px;right:4px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;font-family:var(--font-mono);padding:1px 4px;border-radius:3px;}\n#msPlayerRoot .rc-info{flex:1;min-width:0}\n#msPlayerRoot .rc-name{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--text-1);letter-spacing:-0.01em;}\n#msPlayerRoot .rc-date,#msPlayerRoot .rc-path{font-size:10px;color:var(--text-3);line-height:1.5;font-family:var(--font-mono);}\n#msPlayerRoot .rc-desc{font-size:11px;color:var(--text-2);line-height:1.5;margin-top:2px;}\n\n/* ===== Responsive breakpoints ===== */\n\n/* 1100px 以下：直排，right-panel 撐滿 */\n@media(max-width:1100px){\n  #msPlayerRoot .body-row{\n    flex-direction:column;\n  }\n  #msPlayerRoot .left-col{\n    width:100%;\n    flex:none; /* 不讓 flex 計算干擾寬度 */\n  }\n  #msPlayerRoot .right-panel{\n    width:100%;\n    min-width:0;\n    flex-shrink:1;\n    border-radius:var(--radius-lg);\n  }\n}\n\n/* 768px 以下：字體縮小、卡片縮小 */\n@media(max-width:768px){\n  #msPlayerRoot .page{padding:14px 14px 24px}\n  #msPlayerRoot .meta h2{font-size:17px}\n  #msPlayerRoot .clip-card{width:130px}\n  #msPlayerRoot .strip-header{align-items:flex-start}\n}\n\n/* 480px 以下：保底最小高度 */\n@media(max-width:480px){\n  #msPlayerRoot .viewer{min-height:180px;}\n}\n</style>\n\n<div id=\"msPlayerRoot\">\n  <div class=\"page\">\n    <div class=\"topbar\">\n      <a class=\"back-btn\" href=\"#\" onclick=\"history.back(); return false;\">&#8249;</a>\n    </div>\n    <div class=\"body-row\">\n      <div class=\"left-col\">\n        <div class=\"viewer\" id=\"viewer\"></div>\n        <div class=\"meta\">\n          <h2 id=\"mainTitle\">Name</h2>\n          <div class=\"meta-sub\" id=\"mainMeta\">2026/01/04<br>路徑/資料夾/photo<br>文字描述之類</div>\n        </div>\n\n        <div class=\"strip-block\">\n          <div class=\"msr-filter-panel\" id=\"msrFilterPanel\">\n            <div class=\"fp-sec\">\n              <span class=\"fp-lbl\">排序方式</span>\n              <div class=\"fp-sort-by\">\n                <button class=\"fp-sbtn active\" data-sort-by=\"time\">時間</button>\n                <button class=\"fp-sbtn\" data-sort-by=\"size\">檔案大小</button>\n                <button class=\"fp-sbtn\" data-sort-by=\"name\">檔名</button>\n              </div>\n              <div class=\"fp-sort-divider\"></div>\n              <div class=\"fp-sort-dir\">\n                <button class=\"fp-sbtn active\" data-sort-dir=\"asc\" id=\"fp10DirAsc\">舊 → 新</button>\n                <button class=\"fp-sbtn\" data-sort-dir=\"desc\" id=\"fp10DirDesc\">新 → 舊</button>\n              </div>\n            </div>\n            <div class=\"fp-div\"></div>\n            <div class=\"fp-sec\">\n              <span class=\"fp-lbl\">過濾方式</span>\n              <div class=\"fp-tgrp\">\n                <button class=\"fp-tpill\" data-type=\"image\"><span class=\"fp-chk\"></span>照片</button>\n                <button class=\"fp-tpill\" data-type=\"video\"><span class=\"fp-chk\"></span>影片</button>\n              </div>\n            </div>\n            <div class=\"fp-div\"></div>\n            <div class=\"fp-sec\">\n              <span class=\"fp-lbl\">時間</span>\n              <div class=\"fp-ttabs\">\n                <button class=\"fp-ttab active\" data-mode=\"Range\">區間</button>\n                <button class=\"fp-ttab\" data-mode=\"Before\">之前</button>\n                <button class=\"fp-ttab\" data-mode=\"After\">之後</button>\n              </div>\n              <div class=\"fp-drow\" id=\"fp10DRow\">\n                <svg width=\"13\" height=\"13\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"#aeaeb2\" stroke-width=\"1.5\"><rect x=\"1\" y=\"2\" width=\"12\" height=\"11\" rx=\"2\"/><path d=\"M1 5.5h12M4.5 1v2M9.5 1v2\"/></svg>\n                <span class=\"fp-dtxt\" id=\"fp10DTxt\">— ～ —</span>\n                <span class=\"fp-darr\">▾</span>\n              </div>\n              <div class=\"fp-calwrap\" id=\"fp10CalWrap\">\n                <div class=\"fp-cal\">\n                  <div class=\"fp-cal-hdr\">\n                    <button class=\"fp-cal-nav\" id=\"fp10CalPrev\">&#8249;</button>\n                    <button class=\"fp-cal-mlbl\" id=\"fp10CalMLbl\"><span id=\"fp10CalMLblTxt\"></span><span class=\"fp-cal-mlbl-arr\">▾</span></button>\n                    <button class=\"fp-cal-nav\" id=\"fp10CalNext\">&#8250;</button>\n                  </div>\n                  <div class=\"fp-ympick\" id=\"fp10YMPick\">\n                    <div class=\"fp-ym-yr-row\">\n                      <button class=\"fp-ym-yr-nav\" id=\"fp10YMYrPrev\">&#8249;</button>\n                      <button class=\"fp-ym-yr-lbl\" id=\"fp10YMYrLbl\"></button>\n                      <button class=\"fp-ym-yr-nav\" id=\"fp10YMYrNext\">&#8250;</button>\n                    </div>\n                    <div class=\"fp-ym-grid\" id=\"fp10YMGrid\"></div>\n                  </div>\n                  <div class=\"fp-cal-body\" id=\"fp10CalBody\">\n                    <div class=\"fp-cal-grid\" id=\"fp10CalGrid\"></div>\n                  </div>\n                  <div class=\"fp-cal-foot\">\n                    <button class=\"fp-cal-act\" id=\"fp10CalClear\">清除</button>\n                    <button class=\"fp-cal-act\" id=\"fp10CalToday\">今天</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"fp-div\"></div>\n            <div class=\"fp-sec\">\n              <span class=\"fp-lbl\">檔案大小</span>\n              <div class=\"fp-rval\"><span id=\"fp10SzMin\">—</span><span id=\"fp10SzMax\">—</span></div>\n              <div class=\"fp-drng\"><div class=\"fp-dtrk\"></div><div class=\"fp-dfil\" id=\"fp10SzFil\"></div><input type=\"range\" id=\"fp10SzA\" min=\"0\" max=\"100\" value=\"0\"><input type=\"range\" id=\"fp10SzB\" min=\"0\" max=\"100\" value=\"100\"></div>\n              <div class=\"fp-rlbls\"><span>1 MB 以下</span><span>100 GB+</span></div>\n              <button class=\"fp-unlim\" id=\"fp10SzUnlim\">∞ 不限大小</button>\n            </div>\n            <div class=\"fp-sec\">\n              <span class=\"fp-lbl\">影片時長</span>\n              <div class=\"fp-rval\"><span id=\"fp10DrMin\">—</span><span id=\"fp10DrMax\">—</span></div>\n              <div class=\"fp-drng\"><div class=\"fp-dtrk\"></div><div class=\"fp-dfil\" id=\"fp10DrFil\"></div><input type=\"range\" id=\"fp10DrA\" min=\"0\" max=\"100\" value=\"0\"><input type=\"range\" id=\"fp10DrB\" min=\"0\" max=\"100\" value=\"100\"></div>\n              <div class=\"fp-rlbls\"><span>3 秒以下</span><span>3 小時以上</span></div>\n              <button class=\"fp-unlim\" id=\"fp10DrUnlim\">∞ 不限時長</button>\n            </div>\n            <button class=\"fp-apply\" id=\"fp10Apply\">套用篩選</button>\n          </div>\n\n          <div class=\"strip-header\">\n            <span>以下是找到符合 <strong id=\"stripKeyword\">風景</strong> 的照片影片：</span>\n            <div class=\"filter-btn-wrap\">\n              <button class=\"filter-btn\" id=\"msrFilterBtn\" aria-label=\"Filter\" onclick=\"if(window._fp10ToggleFP)window._fp10ToggleFP(event);else if(window._fp10Init){window._fp10Init();setTimeout(function(){if(window._fp10ToggleFP)window._fp10ToggleFP(event);},300);}\">\n                <svg width=\"15\" height=\"11\" viewBox=\"0 0 15 11\" fill=\"none\">\n                  <rect y=\"0\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>\n                  <rect y=\"4.6\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>\n                  <rect y=\"9.2\" width=\"15\" height=\"1.8\" rx=\"0.9\" fill=\"currentColor\"/>\n                </svg>\n              </button>\n            </div>\n          </div>\n          <div class=\"strip\" id=\"strip\"></div>\n        </div>\n      </div>\n\n      <div class=\"right-panel\">\n        <div class=\"rp-head\">\n          <span class=\"rp-title\">Recently viewed</span>\n          <span class=\"rp-link\">查看全部</span>\n        </div>\n        <div id=\"recentList\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','media-detail','','inherit','closed','closed','','565-revision-v1','','','2026-05-22 05:44:54','2026-05-22 05:44:54','',565,'https://m5wp.momentry.ddns.net/?p=1617',0,'revision','',0),
(1618,6,'2026-05-22 07:43:55','2026-05-22 07:43:55','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" > 全部</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"checked=\"\"> 全部影片</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"photo\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked=\"\">\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-22 07:43:55','2026-05-22 07:43:55','',1356,'https://m5wp.momentry.ddns.net/?p=1618',0,'revision','',0),
(1619,6,'2026-05-22 07:46:19','2026-05-22 07:46:19','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked=\"\"> 全部</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"photo\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked=\"\">\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-22 07:46:19','2026-05-22 07:46:19','',1356,'https://m5wp.momentry.ddns.net/?p=1619',0,'revision','',0),
(1620,6,'2026-05-22 07:54:36','2026-05-22 07:54:36','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" > 全部</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"checked> 全部影片</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"photo\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked=\"\">\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-22 07:54:36','2026-05-22 07:54:36','',1356,'https://m5wp.momentry.ddns.net/?p=1620',0,'revision','',0),
(1621,6,'2026-05-22 07:55:28','2026-05-22 07:55:28','<!-- wp:html -->\n<div id=\"ms-files-page\">\n  <section class=\"mp-panel is-active\"> \n    <div class=\"mp-toolbar\">\n      <div class=\"mp-toolbar-left\">\n        <button class=\"mp-btn-primary\" type=\"button\" id=\"mpAddToPeople\">註冊</button>\n\n        <button class=\"mp-btn-icon\" type=\"button\" title=\"重新整理\" aria-label=\"重新整理\" id=\"mpRefreshBtn\">\n          <span class=\"mp-refresh-icon\">⟳</span>\n        </button>\n\n        <label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowAll\" value=\"all\" checked=\"\"> 全部</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowVideos\" value=\"video\"> 全部影片</label>\n<label class=\"mp-check\">\n<input type=\"radio\" name=\"mp-display-filter\" id=\"mpShowDocs\" value=\"photo\"> 全部照片</label>\n      </div>\n\n      <div class=\"mp-toolbar-right\">\n        <div class=\"mp-search-wrap\">\n          <input type=\"text\" class=\"mp-search\" id=\"mpSearchInput\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\">\n        </div>\n        <button class=\"mp-filter-btn\" type=\"button\" id=\"mpToggleFilter\">☰</button>\n      </div>\n    </div>\n\n    <div class=\"mp-filter-pop\" id=\"mpFilterPop\">\n  <div class=\"mp-filter-title\">排序方式</div>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked=\"\">\n    依時間・由近到遠\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n    依時間・由遠到近\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n    依大小・由大到小\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n    依大小・由小到大\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n    依檔名・由 A 到 Z\n  </label>\n\n  <label class=\"mp-radio-row\">\n    <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n    依檔名・由 Z 到 A\n  </label>\n\n  <div class=\"mp-filter-title\">過濾方式</div>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n    未註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpFilterRegistered\">\n    已註冊\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyVideos\">\n    僅顯示影片\n  </label>\n\n  <label class=\"mp-check-row\">\n    <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n    僅顯示文字檔案\n  </label>\n\n  <div class=\"mp-filter-title\">大小</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpSizeMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小 MB\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpSizeMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大 MB\">\n  </div>\n\n  <div class=\"mp-filter-title\">影片時長</div>\n\n  <div class=\"mp-range-row\">\n    <input type=\"number\" id=\"mpDurationMin\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最小分鐘\">\n    <span>—</span>\n    <input type=\"number\" id=\"mpDurationMax\" class=\"mp-filter-number\" min=\"0\" placeholder=\"最大分鐘\">\n  </div>\n\n  <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n    清除篩選\n  </button>\n</div>\n\n    <div class=\"mp-status\" id=\"mpStatus\"></div>\n    <div class=\"mp-grid\" id=\"mpGrid\"></div>\n  </section>\n</div>\n\n<style>\n#ms-files-page{\n  width:100%;\n  max-width:1200px;\n  margin:0 auto;\n  color:#202124;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  position:relative;\n}\n#ms-files-page *{box-sizing:border-box;}\n\n#ms-files-page button,\n#ms-files-page button:focus,\n#ms-files-page button:active,\n#ms-files-page button:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n#ms-files-page input[type=\"radio\"],\n#ms-files-page input[type=\"checkbox\"],\n#ms-files-page input[type=\"radio\"]:focus,\n#ms-files-page input[type=\"checkbox\"]:focus,\n#ms-files-page input[type=\"radio\"]:active,\n#ms-files-page input[type=\"checkbox\"]:active,\n#ms-files-page input[type=\"radio\"]:focus-visible,\n#ms-files-page input[type=\"checkbox\"]:focus-visible {\n  outline:none !important;\n  box-shadow:none !important;\n}\n\n.mp-panel{\n  display:block;\n  position:relative;\n  overflow:visible;\n}\n\n.mp-toolbar{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:16px;\n  margin-bottom:22px;\n  flex-wrap:wrap;\n  position:relative;\n  z-index:2;\n}\n\n.mp-toolbar-left{\n  display:flex;\n  align-items:center;\n  gap:18px;\n  flex-wrap:wrap;\n}\n\n.mp-toolbar-right{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  margin-left:auto;\n}\n\n.mp-btn-primary,\n.mp-btn-icon,\n.mp-filter-btn{\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#202124;\n  border-radius:18px;\n  font-size:14px;\n  padding:10px 18px;\n  cursor:pointer;\n  box-shadow:0 2px 6px rgba(0,0,0,.04);\n}\n\n.mp-btn-primary{\n  font-weight:600;\n}\n\n.mp-btn-icon{\n  width:40px;\n  height:40px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n  box-shadow:0 4px 10px rgba(0,0,0,.08);\n  transition:all .15s ease;\n}\n\n.mp-btn-icon:hover{\n  transform:scale(1.06);\n}\n\n.mp-refresh-icon{\n  font-size:22px;\n  line-height:1;\n  font-weight:500;\n  transform:translateY(-1px);\n}\n\n.mp-filter-btn{\n  width:42px;\n  height:42px;\n  padding:0;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  border-radius:50%;\n}\n\n.mp-check,\n.mp-check-row,\n.mp-radio-row{\n  font-size:13px;\n  color:#5f6368;\n  display:flex;\n  align-items:center;\n  gap:6px;\n}\n\n.mp-search-wrap{\n  width:240px;\n}\n\n.mp-search{\n  width:100%;\n  height:42px;\n  border:1px solid #e1e5ea;\n  border-radius:14px;\n  padding:0 14px;\n  font-size:14px;\n  background:#fff;\n  outline:none;\n}\n\n.mp-status{\n  font-size:13px;\n  color:#7a7f87;\n  margin:4px 0 14px;\n  display:none;\n}\n\n.mp-status.show{\n  display:block;\n}\n\n.mp-grid{\n  display:grid;\n  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));\n  gap:16px;\n}\n\n.mp-file-card{\n  border-radius:14px;\n  cursor:pointer;\n  position:relative;\n} \n\n.mp-thumb-wrap{\n  position:relative;\n  border-radius:12px;\n  overflow:hidden;\n  background:#eef2f7;\n  aspect-ratio:4 / 3;\n  border:1px solid #e6ebf1;\n}\n\n.mp-thumb-wrap img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n.mp-doc-thumb{\n  width:100%;\n  height:100%;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  flex-direction:column;\n  gap:8px;\n  background:linear-gradient(180deg,#f7f9fc,#eef2f7);\n  color:#6b7280;\n  text-align:center;\n  padding:14px;\n}\n\n.mp-doc-icon{\n  font-size:38px;\n  line-height:1;\n}\n\n.mp-doc-ext{\n  font-size:11px;\n  font-weight:700;\n  letter-spacing:.5px;\n  color:#7a818c;\n  text-transform:uppercase;\n}\n\n.mp-file-card.is-selected .mp-thumb-wrap{\n  box-shadow:0 0 0 2px #d9dde3 inset;\n}\n\n.mp-badge-type{\n  position:absolute;\n  top:8px;\n  left:8px;\n  font-size:10px;\n  line-height:1;\n  padding:4px 6px;\n  border-radius:999px;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  letter-spacing:.3px;\n}\n\n.mp-checkmark{\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.75);\n  color:#fff;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n}\n\n.mp-file-card.is-selected .mp-checkmark{\n  display:flex;\n}\n\n.mp-meta{\n  padding-top:6px;\n}\n\n.mp-source{\n  font-size:11px;\n  color:#8a919c;\n  margin-bottom:2px;\n}\n\n.mp-name{\n  font-size:12px;\n  color:#42474f;\n  line-height:1.4;\n  display:-webkit-box;\n  -webkit-line-clamp:2;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.mp-people{\n  display:flex;\n  flex-wrap:wrap;\n  gap:4px;\n  margin-top:5px;\n}\n\n.mp-person-chip{\n  font-size:10px;\n  color:#4b5563;\n  background:#f1f3f5;\n  border:1px solid #e5e7eb;\n  border-radius:999px;\n  padding:2px 6px;\n}\n\n.mp-detail-box{\n  display:none;\n  margin-top:8px;\n  padding:8px 9px;\n  border:1px solid #e5e7eb;\n  background:#fafafa;\n  border-radius:10px;\n  font-size:11px;\n  color:#4b5563;\n  line-height:1.5;\n}\n\n.mp-file-card.show-detail .mp-detail-box{\n  display:block;\n}\n\n.mp-detail-link{\n  border:none;\n  background:transparent;\n  color:#2563eb;\n  font-size:11px;\n  padding:0;\n  margin-top:6px;\n  cursor:pointer;\n}\n\n.mp-detail-link:hover{\n  text-decoration:underline;\n}\n\n.mp-detail-title{\n  font-weight:700;\n  color:#202124;\n  margin-bottom:4px;\n}\n\n.mp-detail-row{\n  margin-bottom:2px;\n  word-break:break-word;\n}\n\n.mp-filter-pop{\n  position:absolute;\n  top:64px;\n  right:0;\n  width:250px;\n  background:#fff;\n  border:1px solid #eceff3;\n  border-radius:24px;\n  box-shadow:0 16px 36px rgba(0,0,0,.08);\n  padding:18px 18px 16px;\n  z-index:999;\n  display:none;\n}\n\n.mp-filter-pop.show{\n  display:block;\n}\n\n.mp-filter-title{\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  margin:10px 0 10px;\n}\n\n.mp-filter-title:first-child{\n  margin-top:0;\n}\n\n@media (max-width:900px){\n  .mp-toolbar{\n    align-items:flex-start;\n  }\n\n  .mp-toolbar-right{\n    margin-left:0;\n  }\n\n  .mp-search-wrap{\n    width:100%;\n    min-width:220px;\n  }\n}\n\n@media (max-width:640px){\n  .mp-grid{\n    grid-template-columns:repeat(2, 1fr);\n  }\n\n  .mp-filter-pop{\n    right:auto;\n    left:0;\n    width:min(100%, 280px);\n  }\n}\n/* =========================================\n   選取狀態改成淺藍色，不再顯示 √\n   目的：避免和 Ready / Completed 的 √ 衝突\n   ========================================= */\n\n/* 取消原本「選取卡片」的 √ */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n\n/* 選取時：卡片外框變淡藍色 */\n#ms-files-page .mp-file-card.is-selected{\n  border-radius:14px;\n}\n\n/* 選取時：縮圖區變成淡藍色框 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n  border-color:#7db9ff !important;\n  background:#eaf4ff !important;\n  box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n}\n\n/* 選取時：圖片上加一層很淡的藍色，不會擋住圖片 */\n#ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:rgba(125,185,255,.18);\n  border-radius:12px;\n  pointer-events:none;\n  z-index:3;\n}\n\n/* 文件圖示被選取時，也有淡藍色感覺 */\n#ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n  background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n}\n\n/* Ready / Completed 的 √ 保留，並放在最上層 */\n#ms-files-page .mp-file-card.is-ready .mp-complete-mark{\n  display:flex !important;\n  z-index:5;\n}\n\n/* 沒有 Ready / Completed 時，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-ready) .mp-complete-mark{\n  display:none !important;\n}\n/* =========================================\n   Completed 完成狀態要顯示 √\n   因為 Ready 已改成 Completed\n   ========================================= */\n\n/* 先保險：不是 completed 的卡片，不顯示完成 √ */\n#ms-files-page .mp-file-card:not(.is-completed) .mp-complete-mark{\n  display:none !important;\n}\n\n/* Completed 狀態：一定顯示完成 √ */\n#ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n  display:flex !important;\n  position:absolute;\n  right:10px;\n  bottom:10px;\n  width:28px;\n  height:28px;\n  border-radius:50%;\n  background:rgba(17,24,39,.78);\n  color:#fff;\n  align-items:center;\n  justify-content:center;\n  font-weight:700;\n  z-index:9;\n}\n\n/* 選取狀態的 √ 不顯示，避免和 completed √ 衝突 */\n#ms-files-page .mp-file-card .mp-checkmark,\n#ms-files-page .mp-file-card.is-selected .mp-checkmark{\n  display:none !important;\n}\n/* =========================================\n   篩選面板補充樣式\n   只影響右側篩選功能\n   ========================================= */\n\n#ms-files-page .mp-filter-pop{\n  max-height:560px;\n  overflow-y:auto;\n}\n\n#ms-files-page .mp-radio-row,\n#ms-files-page .mp-check-row{\n  min-height:24px;\n  margin-bottom:4px;\n}\n\n#ms-files-page .mp-range-row{\n  display:flex;\n  align-items:center;\n  gap:8px;\n  margin:4px 0 12px;\n}\n\n#ms-files-page .mp-filter-number{\n  width:100%;\n  height:32px;\n  border:1px solid #e1e5ea;\n  border-radius:10px;\n  padding:0 9px;\n  font-size:12px;\n  color:#42474f;\n  background:#fff;\n  outline:none;\n}\n\n#ms-files-page .mp-filter-number:focus,\n#ms-files-page .mp-filter-number:active,\n#ms-files-page .mp-filter-number:focus-visible{\n  outline:none !important;\n  box-shadow:none !important;\n  border-color:#cfd6df;\n}\n\n#ms-files-page .mp-filter-reset{\n  width:100%;\n  height:34px;\n  margin-top:8px;\n  border:1px solid #d8dce3;\n  background:#fff;\n  color:#5f6368;\n  border-radius:12px;\n  font-size:13px;\n  cursor:pointer;\n}\n\n#ms-files-page .mp-filter-reset:hover{\n  background:#f6f7f9;\n}\n.mp-play-btn{\n  position:absolute;\n  left:50%;\n  top:50%;\n  transform:translate(-50%,-50%);\n  width:42px;\n  height:42px;\n  border-radius:50%;\n  border:none;\n  background:rgba(0,0,0,.58);\n  color:#fff;\n  font-size:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  z-index:8;\n}\n\n.mp-video-modal{\n  position:fixed;\n  inset:0;\n  background:rgba(0,0,0,.68);\n  display:none;\n  align-items:center;\n  justify-content:center;\n  z-index:99999;\n}\n\n.mp-video-modal.show{\n  display:flex;\n}\n\n.mp-video-box{\n  width:min(900px,92vw);\n  background:#111;\n  border-radius:18px;\n  padding:14px;\n  position:relative;\n}\n\n.mp-video-box video{\n  width:100%;\n  max-height:70vh;\n  border-radius:12px;\n  display:block;\n  background:#000;\n}\n\n.mp-video-close{\n  position:absolute;\n  right:10px;\n  top:10px;\n  width:32px;\n  height:32px;\n  border-radius:50%;\n  border:none;\n  background:rgba(255,255,255,.18);\n  color:#fff;\n  font-size:20px;\n  cursor:pointer;\n  z-index:2;\n}\n</style>\n<!-- /wp:html -->','Library','','inherit','closed','closed','','1356-revision-v1','','','2026-05-22 07:55:28','2026-05-22 07:55:28','',1356,'https://m5wp.momentry.ddns.net/?p=1621',0,'revision','',0),
(1623,4,'2026-05-22 09:38:46','2026-05-22 09:38:46','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked=\"\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-delete-text-btn\" id=\"msPplDeleteBtn\">\n    刪除\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n    </svg>\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-text-btn { position: absolute; top: 0; right: 52px; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #d93025; cursor: pointer; outline: none; padding: 4px 0; transition: opacity .15s; }\n.ms-ppl-delete-text-btn:hover { opacity: .7; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-22 09:38:46','2026-05-22 09:38:46','',1359,'https://m5wp.momentry.ddns.net/?p=1623',0,'revision','',0),
(1624,4,'2026-05-22 09:51:38','2026-05-22 09:51:38','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked=\"\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-22 09:51:38','2026-05-22 09:51:38','',1359,'https://m5wp.momentry.ddns.net/?p=1624',0,'revision','',0),
(1625,4,'2026-05-22 11:46:42','2026-05-22 11:46:42','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked=\"\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-22 11:46:42','2026-05-22 11:46:42','',1359,'https://m5wp.momentry.ddns.net/?p=1625',0,'revision','',0),
(1626,1,'2026-05-24 01:28:49','2026-05-24 01:28:49','<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"100%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:100%\"><!-- wp:shortcode -->\n[momentry_api_dashboard_v9]\n<!-- /wp:shortcode --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->','Momentry API console','','inherit','closed','closed','','1600-revision-v1','','','2026-05-24 01:28:49','2026-05-24 01:28:49','',1600,'https://m5wp.momentry.ddns.net/?p=1626',0,'revision','',0),
(1627,1,'2026-05-24 01:45:12','2026-05-24 01:45:12','<!-- wp:shortcode -->\n[momentry_upload_debug]\n<!-- /wp:shortcode -->','Upload Debug','','trash','closed','closed','','upload-debug__trashed','','','2026-05-24 09:25:23','2026-05-24 09:25:23','',0,'https://m5wp.momentry.ddns.net/?page_id=1627',0,'page','',0),
(1628,1,'2026-05-24 01:45:07','2026-05-24 01:45:07','<!-- wp:shortcode -->\n[momentry_upload_debug]\n<!-- /wp:shortcode -->','Upload Debug','','inherit','closed','closed','','1627-revision-v1','','','2026-05-24 01:45:07','2026-05-24 01:45:07','',1627,'https://m5wp.momentry.ddns.net/?p=1628',0,'revision','',0),
(1633,4,'2026-05-25 01:16:46','2026-05-25 01:16:46','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\" checked=\"\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 01:16:46','2026-05-25 01:16:46','',1359,'https://m5wp.momentry.ddns.net/?p=1633',0,'revision','',0),
(1634,4,'2026-05-25 01:37:36','2026-05-25 01:37:36','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; min-height: 120px; margin-bottom: 28px; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 01:37:36','2026-05-25 01:37:36','',1359,'https://m5wp.momentry.ddns.net/?p=1634',0,'revision','',0),
(1635,4,'2026-05-25 02:03:44','2026-05-25 02:03:44','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 32px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:03:44','2026-05-25 02:03:44','',1359,'https://m5wp.momentry.ddns.net/?p=1635',0,'revision','',0),
(1636,4,'2026-05-25 02:08:06','2026-05-25 02:08:06','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;margin-top:20px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 20px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 48px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:08:06','2026-05-25 02:08:06','',1359,'https://m5wp.momentry.ddns.net/?p=1636',0,'revision','',0),
(1637,4,'2026-05-25 02:34:02','2026-05-25 02:34:02','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <button class=\"ms-fm-btn\" id=\"msPplBackBtn\" style=\"margin-bottom:28px;margin-top:20px;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n    返回\n  </button>\n\n  <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n    編輯\n    <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n      <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 20px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-edit-text-btn { position: absolute; top: 20; right: 0; display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; padding-top: 48px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:34:02','2026-05-25 02:34:02','',1359,'https://m5wp.momentry.ddns.net/?p=1637',0,'revision','',0),
(1638,4,'2026-05-25 02:36:20','2026-05-25 02:36:20','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:36:20','2026-05-25 02:36:20','',1359,'https://m5wp.momentry.ddns.net/?p=1638',0,'revision','',0),
(1639,4,'2026-05-25 02:50:51','2026-05-25 02:50:51','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:50:51','2026-05-25 02:50:51','',1359,'https://m5wp.momentry.ddns.net/?p=1639',0,'revision','',0),
(1640,4,'2026-05-25 02:51:17','2026-05-25 02:51:17','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:51:17','2026-05-25 02:51:17','',1359,'https://m5wp.momentry.ddns.net/?p=1640',0,'revision','',0),
(1641,4,'2026-05-25 02:51:31','2026-05-25 02:51:31','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:51:31','2026-05-25 02:51:31','',1359,'https://m5wp.momentry.ddns.net/?p=1641',0,'revision','',0),
(1642,4,'2026-05-25 02:52:49','2026-05-25 02:52:49','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 12.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: visible; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:52:49','2026-05-25 02:52:49','',1359,'https://m5wp.momentry.ddns.net/?p=1642',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1643,4,'2026-05-25 02:55:53','2026-05-25 02:55:53','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 02:55:53','2026-05-25 02:55:53','',1359,'https://m5wp.momentry.ddns.net/?p=1643',0,'revision','',0),
(1644,6,'2026-05-25 03:24:51','2026-05-25 03:24:51','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_API_BASE = \'https://m5api.momentry.ddns.net\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n\n  var urlParams = new URLSearchParams(window.location.search);\n  var mode = (urlParams.get(\'mode\') || \'keyword\').toLowerCase();\n\n  var endpoint = \'\';\n  var method = \'POST\';\n  var payload = null;\n\n  if (mode === \'keyword\') {\n    endpoint = SEARCH_API_BASE + \'/api/v1/search/universal\';\n    payload = {\n      query: query,\n      limit: 3000\n    };\n  }\n\n  else if (mode === \'semantic\') {\n    endpoint = SEARCH_API_BASE + \'/api/v1/search/smart\';\n    payload = {\n      query: query,\n      limit: 3000\n    };\n  }\n\n  else if (mode === \'people\') {\n    method = \'GET\';\n    endpoint = SEARCH_API_BASE + \'/api/v1/identities/search?q=\' + encodeURIComponent(query);\n  }\n\n  return fetch(endpoint, {\n    method: method,\n    headers: {\n      \'Content-Type\': \'application/json\'\n    },\n    body: method === \'POST\' ? JSON.stringify(payload) : undefined\n  })\n  .then(function(res){\n    if (!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 03:24:51','2026-05-25 03:24:51','',523,'https://m5wp.momentry.ddns.net/?p=1644',0,'revision','',0),
(1645,6,'2026-05-25 03:29:50','2026-05-25 03:29:50','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 03:29:50','2026-05-25 03:29:50','',523,'https://m5wp.momentry.ddns.net/?p=1645',0,'revision','',0),
(1646,6,'2026-05-25 03:33:01','2026-05-25 03:33:01','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled=\"\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input id=\"msInput\" class=\"ms-input\" type=\"text\" inputmode=\"search\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"搜尋照片或影片關鍵字…\" aria-label=\"Search input\">\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'https://wp.momentry.ddns.net/search-chat/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n  var currentMode  = \'keyword\';\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n    currentMode = value;\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-25 03:33:01','2026-05-25 03:33:01','',341,'https://m5wp.momentry.ddns.net/?p=1646',0,'revision','',0),
(1647,6,'2026-05-25 03:35:13','2026-05-25 03:35:13','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled=\"\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input id=\"msInput\" class=\"ms-input\" type=\"text\" inputmode=\"search\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"搜尋照片或影片關鍵字…\" aria-label=\"Search input\">\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'/search-chat/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n  var currentMode  = \'keyword\';\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n    currentMode = value;\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-25 03:35:13','2026-05-25 03:35:13','',341,'https://m5wp.momentry.ddns.net/?p=1647',0,'revision','',0),
(1648,6,'2026-05-25 03:42:48','2026-05-25 03:42:48','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_API_BASE = \'https://m5api.momentry.ddns.net\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n\n  var params = new URLSearchParams(window.location.search);\n  var mode = (params.get(\'mode\') || \'keyword\').toLowerCase();\n\n  var endpoint = \'\';\n  var method = \'POST\';\n  var body = null;\n\n  if (mode === \'keyword\') {\n    endpoint = SEARCH_API_BASE + \'/api/v1/search/universal\';\n    body = {\n      query: query,\n      limit: 3000\n    };\n  }\n\n  else if (mode === \'semantic\') {\n    endpoint = SEARCH_API_BASE + \'/api/v1/search/smart\';\n    body = {\n      query: query,\n      limit: 3000\n    };\n  }\n\n  else if (mode === \'people\') {\n    method = \'GET\';\n    endpoint = SEARCH_API_BASE + \'/api/v1/identities/search?q=\' + encodeURIComponent(query);\n  }\n\n  return fetch(endpoint, {\n    method: method,\n    headers: {\n      \'Content-Type\': \'application/json\'\n    },\n    body: method === \'POST\' ? JSON.stringify(body) : undefined\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 03:42:48','2026-05-25 03:42:48','',523,'https://m5wp.momentry.ddns.net/?p=1648',0,'revision','',0),
(1650,6,'2026-05-25 05:51:04','2026-05-25 05:51:04','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 05:51:04','2026-05-25 05:51:04','',523,'https://m5wp.momentry.ddns.net/?p=1650',0,'revision','',0),
(1651,6,'2026-05-25 05:54:52','2026-05-25 05:54:52','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n    <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">Keyword</div>\n    <div class=\"ms-chat-mode-item\" data-value=\"semantic\">Semantic</div>\n    <div class=\"ms-chat-mode-item\" data-value=\"people\">People</div>\n  </div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 05:54:52','2026-05-25 05:54:52','',523,'https://m5wp.momentry.ddns.net/?p=1651',0,'revision','',0),
(1652,6,'2026-05-25 06:18:36','2026-05-25 06:18:36','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-25 06:18:36','2026-05-25 06:18:36','',523,'https://m5wp.momentry.ddns.net/?p=1652',0,'revision','',0),
(1653,4,'2026-05-25 07:54:54','2026-05-25 07:54:54','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n.ms-ppl-media-item.ms-media-expanded {\n  box-shadow: 0 0 0 2px #1a56db;\n}\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── Merge Modal 信心度標籤 ── */\n.ms-merge-conf-badge {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 6px;\n  border-radius: 999px;\n  margin-top: 3px;\n  letter-spacing: .02em;\n}\n.ms-merge-conf-badge.high  { background: #dcfce7; color: #15803d; }\n.ms-merge-conf-badge.mid   { background: #fef9c3; color: #854d0e; }\n.ms-merge-conf-badge.low   { background: #fee2e2; color: #b91c1c; }\n \n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 07:54:54','2026-05-25 07:54:54','',1359,'https://m5wp.momentry.ddns.net/?p=1653',0,'revision','',0),
(1654,4,'2026-05-25 07:57:20','2026-05-25 07:57:20','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 07:57:20','2026-05-25 07:57:20','',1359,'https://m5wp.momentry.ddns.net/?p=1654',0,'revision','',0),
(1655,4,'2026-05-25 08:01:26','2026-05-25 08:01:26','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n.ms-ppl-media-item.ms-media-expanded {\n  box-shadow: 0 0 0 2px #1a56db;\n}\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── Merge Modal 信心度標籤 ── */\n.ms-merge-conf-badge {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 6px;\n  border-radius: 999px;\n  margin-top: 3px;\n  letter-spacing: .02em;\n}\n.ms-merge-conf-badge.high  { background: #dcfce7; color: #15803d; }\n.ms-merge-conf-badge.mid   { background: #fef9c3; color: #854d0e; }\n.ms-merge-conf-badge.low   { background: #fee2e2; color: #b91c1c; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:01:26','2026-05-25 08:01:26','',1359,'https://m5wp.momentry.ddns.net/?p=1655',0,'revision','',0),
(1656,4,'2026-05-25 08:09:13','2026-05-25 08:09:13','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── Merge Modal 信心度標籤 ── */\n.ms-merge-conf-badge {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 6px;\n  border-radius: 999px;\n  margin-top: 3px;\n  letter-spacing: .02em;\n}\n.ms-merge-conf-badge.high  { background: #dcfce7; color: #15803d; }\n.ms-merge-conf-badge.mid   { background: #fef9c3; color: #854d0e; }\n.ms-merge-conf-badge.low   { background: #fee2e2; color: #b91c1c; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:09:13','2026-05-25 08:09:13','',1359,'https://m5wp.momentry.ddns.net/?p=1656',0,'revision','',0),
(1657,4,'2026-05-25 08:11:29','2026-05-25 08:11:29','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── Merge Modal 信心度標籤 ── */\n.ms-merge-conf-badge {\n  display: block;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-top: 2px;\n  text-align: center;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:11:29','2026-05-25 08:11:29','',1359,'https://m5wp.momentry.ddns.net/?p=1657',0,'revision','',0),
(1658,4,'2026-05-25 08:14:14','2026-05-25 08:14:14','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:14:14','2026-05-25 08:14:14','',1359,'https://m5wp.momentry.ddns.net/?p=1658',0,'revision','',0),
(1659,4,'2026-05-25 08:18:43','2026-05-25 08:18:43','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:18:43','2026-05-25 08:18:43','',1359,'https://m5wp.momentry.ddns.net/?p=1659',0,'revision','',0),
(1660,4,'2026-05-25 08:19:42','2026-05-25 08:19:42','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:19:42','2026-05-25 08:19:42','',1359,'https://m5wp.momentry.ddns.net/?p=1660',0,'revision','',0),
(1661,4,'2026-05-25 08:20:18','2026-05-25 08:20:18','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:20:18','2026-05-25 08:20:18','',1359,'https://m5wp.momentry.ddns.net/?p=1661',0,'revision','',0),
(1662,4,'2026-05-25 08:24:23','2026-05-25 08:24:23','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; ... }\n.ms-ppl-media-thumb { overflow: hidden; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:24:23','2026-05-25 08:24:23','',1359,'https://m5wp.momentry.ddns.net/?p=1662',0,'revision','',0),
(1663,4,'2026-05-25 08:29:56','2026-05-25 08:29:56','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 08:29:56','2026-05-25 08:29:56','',1359,'https://m5wp.momentry.ddns.net/?p=1663',0,'revision','',0),
(1664,4,'2026-05-25 09:05:57','2026-05-25 09:05:57','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n<button class=\"ms-fm-icon-btn ms-ppl-dangling-btn\" id=\"msPplDanglingBtn\" title=\"清理孤立臉\">\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <path d=\"M12 2a5 5 0 1 1 0 10A5 5 0 0 1 12 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M3 21c0-4 4-7 9-7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    <path d=\"M17 17l2 2 4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n</button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n<div class=\"ms-modal-overlay\" id=\"msPplDanglingModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\" id=\"msPplDanglingModalTitle\">掃描孤立臉中…</div>\n    <div class=\"ms-modal-sub\" id=\"msPplDanglingModalSub\">請稍候</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDanglingModalClose\" style=\"display:none;\">關閉</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDanglingModalConfirm\" style=\"display:none;\">加入待定人物</button>\n    </div>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 清理孤立臉按鈕：有孤立臉時顯示橘點 ── */\n.ms-ppl-dangling-btn { position: relative; }\n.ms-ppl-dangling-btn.has-dangling::after {\n  content: \'\';\n  position: absolute;\n  top: 5px; right: 5px;\n  width: 7px; height: 7px;\n  border-radius: 50%;\n  background: #f59e0b;\n  border: 1.5px solid #fff;\n}\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n.ms-ppl-media-item.ms-media-expanded {\n  box-shadow: 0 0 0 2px #1a56db;\n}\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── Merge Modal 信心度標籤 ── */\n.ms-merge-conf-badge {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 1px 6px;\n  border-radius: 999px;\n  margin-top: 3px;\n  letter-spacing: .02em;\n}\n.ms-merge-conf-badge.high  { background: #dcfce7; color: #15803d; }\n.ms-merge-conf-badge.mid   { background: #fef9c3; color: #854d0e; }\n.ms-merge-conf-badge.low   { background: #fee2e2; color: #b91c1c; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 09:05:57','2026-05-25 09:05:57','',1359,'https://m5wp.momentry.ddns.net/?p=1664',0,'revision','',0),
(1665,4,'2026-05-25 09:09:30','2026-05-25 09:09:30','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-25 09:09:30','2026-05-25 09:09:30','',1359,'https://m5wp.momentry.ddns.net/?p=1665',0,'revision','',0),
(1667,1,'2026-05-25 11:26:44','2026-05-25 11:26:44','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n</style>\n\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Progress </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Progress','','inherit','closed','closed','','1537-revision-v1','','','2026-05-25 11:26:44','2026-05-25 11:26:44','',1537,'https://m5wp.momentry.ddns.net/?p=1667',0,'revision','',0),
(1669,1,'2026-05-25 11:28:15','2026-05-25 11:28:15','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n</style>\n\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Logs </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Logs','','inherit','closed','closed','','1568-revision-v1','','','2026-05-25 11:28:15','2026-05-25 11:28:15','',1568,'https://m5wp.momentry.ddns.net/?p=1669',0,'revision','',0),
(1671,1,'2026-05-25 11:29:40','2026-05-25 11:29:40','<!-- wp:html -->\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Metrics </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n<!-- /wp:html -->','Metrics','','inherit','closed','closed','','1570-revision-v1','','','2026-05-25 11:29:40','2026-05-25 11:29:40','',1570,'https://m5wp.momentry.ddns.net/?p=1671',0,'revision','',0),
(1672,1,'2026-05-25 11:30:29','2026-05-25 11:30:29','<!-- wp:html -->\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Evaluation </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Evaluation','','inherit','closed','closed','','1573-revision-v1','','','2026-05-25 11:30:29','2026-05-25 11:30:29','',1573,'https://m5wp.momentry.ddns.net/?p=1672',0,'revision','',0),
(1673,1,'2026-05-25 11:32:04','2026-05-25 11:32:04','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n<style>\n  /* 让区块撑满画面 */\n  html, body {\n    margin: 0;\n    padding: 0;\n    min-height: 100%;\n    background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 42%, #e9eff8 100%);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans TC\", \"PingFang TC\", sans-serif;\n  }\n\n  #ms-coming-soon {\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  #ms-coming-soon .ms-wrap {\n    width: 100%;\n    max-width: 1200px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #ms-coming-soon .ms-card {\n    width: min(560px, 92vw);\n    background: rgba(255, 255, 255, 0.78);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.7);\n    border-radius: 28px;\n    padding: 48px 32px;\n    text-align: center;\n    box-shadow:\n      0 10px 30px rgba(100, 120, 160, 0.10),\n      0 2px 10px rgba(100, 120, 160, 0.06);\n  }\n\n  #ms-coming-soon .ms-badge {\n    display: inline-block;\n    padding: 8px 14px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #5f6f8c;\n    background: rgba(255, 255, 255, 0.9);\n    border: 1px solid #e6ebf3;\n    border-radius: 999px;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  #ms-coming-soon .ms-title {\n    margin: 0;\n    font-size: clamp(34px, 6vw, 56px);\n    line-height: 1.15;\n    font-weight: 700;\n    color: #24324a;\n    letter-spacing: 1px;\n  }\n\n  #ms-coming-soon .ms-subtitle {\n    margin: 14px 0 0;\n    font-size: 16px;\n    color: #7b8799;\n    letter-spacing: 2px;\n  }\n\n  #ms-coming-soon .ms-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  #ms-coming-soon .ms-dots span {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: #e8724a;\n    opacity: 0.25;\n    animation: msBlink 1.4s infinite ease-in-out;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n\n  #ms-coming-soon .ms-dots span:nth-child(3) {\n    animation-delay: 0.4s;\n  }\n\n  @keyframes msBlink {\n    0%, 80%, 100% {\n      transform: scale(0.9);\n      opacity: 0.25;\n    }\n    40% {\n      transform: scale(1.15);\n      opacity: 1;\n    }\n  }\n\n  @media (max-width: 640px) {\n    #ms-coming-soon .ms-card {\n      padding: 40px 24px;\n      border-radius: 22px;\n    }\n\n    #ms-coming-soon .ms-subtitle {\n      font-size: 14px;\n      letter-spacing: 1.5px;\n    }\n  }\n</style>\n</style>\n\n<!-- 正在制作中｜简单展示页 -->\n<div id=\"ms-coming-soon\">\n  <div class=\"ms-wrap\">\n    <div class=\"ms-card\">\n      <div class=\"ms-badge\">Momentry Studio</div>\n      <h1 class=\"ms-title\">⭐ Evaluation </h1>\n      <p class=\"ms-subtitle\">Coming Soon</p>\n      <div class=\"ms-dots\" aria-hidden=\"true\">\n        <span></span>\n        <span></span>\n        <span></span>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','Evaluation','','inherit','closed','closed','','1573-revision-v1','','','2026-05-25 11:32:04','2026-05-25 11:32:04','',1573,'https://m5wp.momentry.ddns.net/?p=1673',0,'revision','',0),
(1674,1,'2026-05-25 11:34:07','2026-05-25 11:34:07','<!-- wp:shortcode -->\n[raptor_workflow_demo]\n<!-- /wp:shortcode -->','raptor_workflow_demo','','publish','closed','closed','','demo','','','2026-05-25 14:16:11','2026-05-25 14:16:11','',0,'https://m5wp.momentry.ddns.net/?page_id=1674',0,'page','',0),
(1675,1,'2026-05-25 11:34:07','2026-05-25 11:34:07','<!-- wp:shortcode -->\n[raptor_workflow_demo]\n<!-- /wp:shortcode -->','','','inherit','closed','closed','','1674-revision-v1','','','2026-05-25 11:34:07','2026-05-25 11:34:07','',1674,'https://m5wp.momentry.ddns.net/?p=1675',0,'revision','',0),
(1676,1,'2026-05-25 14:16:11','2026-05-25 14:16:11','<!-- wp:shortcode -->\n[raptor_workflow_demo]\n<!-- /wp:shortcode -->','raptor_workflow_demo','','inherit','closed','closed','','1674-revision-v1','','','2026-05-25 14:16:11','2026-05-25 14:16:11','',1674,'https://m5wp.momentry.ddns.net/?p=1676',0,'revision','',0),
(1679,4,'2026-05-26 00:37:41','2026-05-26 00:37:41','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<!-- Filter bar -->\n<div class=\"ms-ppl-uface-filterbar\" id=\"msPplUfaceFilterbar\">\n  <!-- 搜尋框 -->\n  <div class=\"ms-ppl-search-wrap\" style=\"min-width:180px;flex:1;max-width:280px;\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n  <!-- Confidence filter -->\n  <div class=\"ms-uface-filter-group\">\n    <span class=\"ms-uface-filter-label\">信心值</span>\n    <select class=\"ms-uface-select\" id=\"msPplUfaceConfFilter\">\n      <option value=\"\">全部</option>\n      <option value=\"80\">≥ 80%</option>\n      <option value=\"60\">≥ 60%</option>\n      <option value=\"40\">≥ 40%</option>\n      <option value=\"0\">＜ 40%</option>\n    </select>\n  </div>\n\n  <!-- 排序 -->\n  <div class=\"ms-uface-filter-group\">\n    <span class=\"ms-uface-filter-label\">排序</span>\n    <select class=\"ms-uface-select\" id=\"msPplUfaceSortSel\">\n      <option value=\"conf_desc\">信心值 高→低</option>\n      <option value=\"conf_asc\">信心值 低→高</option>\n      <option value=\"time_desc\">時間 新→舊</option>\n      <option value=\"file\">依檔案</option>\n    </select>\n  </div>\n\n  <!-- 載入狀態 -->\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n\n  <!-- 重新整理 -->\n  <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n        stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 00:37:41','2026-05-26 00:37:41','',1359,'https://m5wp.momentry.ddns.net/?p=1679',0,'revision','',0),
(1680,4,'2026-05-26 00:41:24','2026-05-26 00:41:24','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<!-- Filter bar -->\n<div class=\"ms-ppl-uface-filterbar\" id=\"msPplUfaceFilterbar\">\n  <!-- 搜尋框 -->\n  <div class=\"ms-ppl-search-wrap\" style=\"min-width:180px;flex:1;max-width:280px;\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n\n  <!-- 排序 -->\n  <div class=\"ms-uface-filter-group\">\n    <span class=\"ms-uface-filter-label\">排序</span>\n    <select class=\"ms-uface-select\" id=\"msPplUfaceSortSel\">\n      <option value=\"conf_desc\">信心值 高→低</option>\n      <option value=\"conf_asc\">信心值 低→高</option>\n      <option value=\"time_desc\">時間 新→舊</option>\n      <option value=\"file\">依檔案</option>\n    </select>\n  </div>\n\n  <!-- 載入狀態 -->\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n\n  <!-- 重新整理 -->\n  <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n        stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 00:41:24','2026-05-26 00:41:24','',1359,'https://m5wp.momentry.ddns.net/?p=1680',0,'revision','',0),
(1681,4,'2026-05-26 00:42:45','2026-05-26 00:42:45','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<!-- Filter bar -->\n<div class=\"ms-ppl-uface-filterbar\" id=\"msPplUfaceFilterbar\">\n  <!-- 搜尋框 -->\n  <div class=\"ms-ppl-search-wrap\" style=\"min-width:180px;flex:1;max-width:280px;\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n\n  <!-- 排序 -->\n  <div class=\"ms-uface-filter-group\">\n    <span class=\"ms-uface-filter-label\">排序</span>\n    <select class=\"ms-uface-select\" id=\"msPplUfaceSortSel\">\n      <option value=\"time_desc\">時間 新→舊</option>\n      <option value=\"file\">依檔案</option>\n    </select>\n  </div>\n\n  <!-- 載入狀態 -->\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n\n  <!-- 重新整理 -->\n  <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n        stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 00:42:45','2026-05-26 00:42:45','',1359,'https://m5wp.momentry.ddns.net/?p=1681',0,'revision','',0),
(1682,4,'2026-05-26 00:50:19','2026-05-26 00:50:19','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\" checked> 時間 新→舊</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"file\"> 依檔案</label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\"\n        stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 00:50:19','2026-05-26 00:50:19','',1359,'https://m5wp.momentry.ddns.net/?p=1682',0,'revision','',0),
(1683,4,'2026-05-26 00:51:27','2026-05-26 00:51:27','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 清理孤立臉結果 -->\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\" checked> 時間 新→舊</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"file\"> 依檔案</label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  \n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 00:51:27','2026-05-26 00:51:27','',1359,'https://m5wp.momentry.ddns.net/?p=1683',0,'revision','',0),
(1684,4,'2026-05-26 01:07:55','2026-05-26 01:07:55','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋檔案名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\" checked> 時間 新→舊</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"file\"> 依檔案</label>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  \n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 01:07:55','2026-05-26 01:07:55','',1359,'https://m5wp.momentry.ddns.net/?p=1684',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1686,4,'2026-05-26 01:20:08','2026-05-26 01:20:08','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n</div>\n      </div>\n    </div>\n  </div>\n\n  \n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 01:20:08','2026-05-26 01:20:08','',1359,'https://m5wp.momentry.ddns.net/?p=1686',0,'revision','',0),
(1687,4,'2026-05-26 02:10:15','2026-05-26 02:10:15','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n</div>\n      </div>\n    </div>\n  </div>\n\n  \n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n<!-- Modal：影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;\"></video>\n  </div>\n</div>\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n.ms-modal-video {\n  max-width: 720px;\n  width: 95%;\n  padding: 20px 24px 24px;\n  text-align: left;\n  background: #fff;\n}\n.ms-modal-video-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n.ms-modal-video-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #202124;\n}\n.ms-modal-video-close {\n  border: none;\n  background: transparent;\n  font-size: 16px;\n  color: #5f6368;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n}\n.ms-modal-video-close:hover { color: #202124; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:10:15','2026-05-26 02:10:15','',1359,'https://m5wp.momentry.ddns.net/?p=1687',0,'revision','',0),
(1688,4,'2026-05-26 02:24:18','2026-05-26 02:24:18','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n  <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n</div>\n      </div>\n    </div>\n  </div>\n\n  \n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n\n \n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n\n \n/* ── Media card 可點擊狀態 ── */\n.ms-ppl-media-item { cursor: pointer; }\n\n \n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap {\n  display: none;\n  padding: 10px 12px 14px;\n  background: #f8f9fa;\n  border-top: 1px solid #e8eaed;\n}\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap {\n  display: block;\n}\n.ms-media-timeline-bar {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  background: #e8eaed;\n  border-radius: 999px;\n  margin: 10px 0 6px;\n  cursor: default;\n}\n.ms-media-timeline-seg {\n  position: absolute;\n  top: 0; height: 100%;\n  background: #1a56db;\n  border-radius: 999px;\n  min-width: 3px;\n  transition: background .15s;\n}\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 10px;\n  color: #9aa0a6;\n  margin-bottom: 6px;\n}\n.ms-media-timeline-loading {\n  font-size: 12px;\n  color: #9aa0a6;\n  padding: 4px 0;\n}\n.ms-media-timeline-hits {\n  font-size: 11px;\n  color: #5f6368;\n  margin-top: 4px;\n}\n.ms-media-timeline-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: #3c4043;\n  margin-bottom: 4px;\n  letter-spacing: .03em;\n  text-transform: uppercase;\n}\n \n/* tooltip 浮現在時間軸上 */\n.ms-media-timeline-bar .ms-seg-tip {\n  display: none;\n  position: absolute;\n  bottom: 12px;\n  transform: translateX(-50%);\n  background: rgba(0,0,0,.72);\n  color: #fff;\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n}\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n \n/* ── 待定人臉 filterbar ── */\n.ms-ppl-uface-filterbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n.ms-uface-filter-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ms-uface-filter-label {\n  font-size: 12px;\n  font-weight: 600;\n  color: #5f6368;\n  white-space: nowrap;\n}\n.ms-uface-select {\n  border: 1.5px solid #d1d5db;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12.5px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  transition: border-color .15s;\n}\n.ms-uface-select:focus { border-color: #202124; }\n.ms-uface-filter-count {\n  font-size: 12px;\n  color: #9aa0a6;\n  white-space: nowrap;\n  margin-left: 4px;\n}\n\n/* 待定人臉卡片：比人物卡小一點 */\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap {\n  width: 90px;\n  height: 90px;\n  border-radius: 14px;\n}\n.ms-uface-conf-badge {\n  position: absolute;\n  bottom: 4px; left: 0; right: 0;\n  text-align: center;\n  font-size: 9px;\n  color: #fff;\n  background: rgba(0,0,0,.45);\n  border-radius: 0 0 10px 10px;\n  padding: 2px 0;\n}\n.ms-uface-file-name {\n  font-size: 10px;\n  color: #9aa0a6;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  margin-top: -4px;\n}\n/* 選取狀態 */\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap {\n  outline: 2.5px solid #1a56db;\n  outline-offset: 2px;\n}\n\n</style>\n\n<!-- ── Modal: 影片播放 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:70vh;\"></video>\n  </div>\n</div>\n\n<style>\n.ms-modal-video {\n  max-width: 720px; width: 95%; padding: 20px 24px 24px;\n  text-align: left; background: #fff;\n}\n.ms-modal-video-header {\n  display: flex; align-items: center;\n  justify-content: space-between; margin-bottom: 16px;\n}\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close {\n  border: none; background: transparent; font-size: 18px;\n  color: #5f6368; cursor: pointer; padding: 0; line-height: 1;\n}\n.ms-modal-video-close:hover { color: #202124; }\n.ms-media-timeline-seg { cursor: pointer; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:24:18','2026-05-26 02:24:18','',1359,'https://m5wp.momentry.ddns.net/?p=1688',0,'revision','',0),
(1689,4,'2026-05-26 02:40:53','2026-05-26 02:40:53','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap { display: none; padding: 10px 12px 14px; background: #f8f9fa; border-top: 1px solid #e8eaed; }\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap { display: block; }\n.ms-media-timeline-bar { position: relative; width: 100%; height: 6px; background: #e8eaed; border-radius: 999px; margin: 10px 0 6px; cursor: default; }\n.ms-media-timeline-seg { position: absolute; top: 0; height: 100%; background: #1a56db; border-radius: 999px; min-width: 3px; transition: background .15s; cursor: pointer; }\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels { display: flex; justify-content: space-between; font-size: 10px; color: #9aa0a6; margin-bottom: 6px; }\n.ms-media-timeline-loading { font-size: 12px; color: #9aa0a6; padding: 4px 0; }\n.ms-media-timeline-hits { font-size: 11px; color: #5f6368; margin-top: 4px; }\n.ms-media-timeline-title { font-size: 11px; font-weight: 700; color: #3c4043; margin-bottom: 4px; letter-spacing: .03em; text-transform: uppercase; }\n.ms-media-timeline-bar .ms-seg-tip { display: none; position: absolute; bottom: 12px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 90px; height: 90px; border-radius: 14px; }\n.ms-uface-conf-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 0 0 10px 10px; padding: 2px 0; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:40:53','2026-05-26 02:40:53','',1359,'https://m5wp.momentry.ddns.net/?p=1689',0,'revision','',0),
(1690,4,'2026-05-26 02:49:58','2026-05-26 02:49:58','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap { display: none; padding: 10px 12px 14px; background: #f8f9fa; border-top: 1px solid #e8eaed; }\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap { display: block; }\n.ms-media-timeline-bar { position: relative; width: 100%; height: 6px; background: #e8eaed; border-radius: 999px; margin: 10px 0 6px; cursor: default; }\n.ms-media-timeline-seg { position: absolute; top: 0; height: 100%; background: #1a56db; border-radius: 999px; min-width: 3px; transition: background .15s; cursor: pointer; }\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels { display: flex; justify-content: space-between; font-size: 10px; color: #9aa0a6; margin-bottom: 6px; }\n.ms-media-timeline-loading { font-size: 12px; color: #9aa0a6; padding: 4px 0; }\n.ms-media-timeline-hits { font-size: 11px; color: #5f6368; margin-top: 4px; }\n.ms-media-timeline-title { font-size: 11px; font-weight: 700; color: #3c4043; margin-bottom: 4px; letter-spacing: .03em; text-transform: uppercase; }\n.ms-media-timeline-bar .ms-seg-tip { display: none; position: absolute; bottom: 12px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 90px; height: 90px; border-radius: 14px; }\n.ms-uface-conf-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 0 0 10px 10px; padding: 2px 0; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#e0e0e0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }\n.ms-thumb-play-circle svg { width:36px;height:36px;opacity:.55;transition:opacity .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:.85; }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:49:58','2026-05-26 02:49:58','',1359,'https://m5wp.momentry.ddns.net/?p=1690',0,'revision','',0),
(1692,4,'2026-05-26 02:51:57','2026-05-26 02:51:57','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap { display: none; padding: 10px 12px 14px; background: #f8f9fa; border-top: 1px solid #e8eaed; }\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap { display: block; }\n.ms-media-timeline-bar { position: relative; width: 100%; height: 6px; background: #e8eaed; border-radius: 999px; margin: 10px 0 6px; cursor: default; }\n.ms-media-timeline-seg { position: absolute; top: 0; height: 100%; background: #1a56db; border-radius: 999px; min-width: 3px; transition: background .15s; cursor: pointer; }\n.ms-media-timeline-seg:hover { background: #1648c0; }\n.ms-media-timeline-labels { display: flex; justify-content: space-between; font-size: 10px; color: #9aa0a6; margin-bottom: 6px; }\n.ms-media-timeline-loading { font-size: 12px; color: #9aa0a6; padding: 4px 0; }\n.ms-media-timeline-hits { font-size: 11px; color: #5f6368; margin-top: 4px; }\n.ms-media-timeline-title { font-size: 11px; font-weight: 700; color: #3c4043; margin-bottom: 4px; letter-spacing: .03em; text-transform: uppercase; }\n.ms-media-timeline-bar .ms-seg-tip { display: none; position: absolute; bottom: 12px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 90px; height: 90px; border-radius: 14px; }\n.ms-uface-conf-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 0 0 10px 10px; padding: 2px 0; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:51:57','2026-05-26 02:51:57','',1359,'https://m5wp.momentry.ddns.net/?p=1692',0,'revision','',0),
(1694,4,'2026-05-26 02:58:47','2026-05-26 02:58:47','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n.ms-media-timeline-wrap { display: none; padding: 10px 12px 14px; background: #f8f9fa; border-top: 1px solid #e8eaed; }\n.ms-ppl-media-item.ms-media-expanded .ms-media-timeline-wrap { display: block; }\n.ms-media-timeline-bar { position: relative; width: 100%; height: 6px; background: #e8eaed; border-radius: 999px; margin: 14px 0 6px; cursor: default; overflow: visible; }\n.ms-media-timeline-seg { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; background: #1a56db; border-radius: 999px; min-width: 5px; cursor: pointer; box-sizing: content-box; padding: 9px 0; margin-top: -9px; transition: height .15s, background .15s; }\n.ms-media-timeline-seg:hover { height: 10px; background: #1648c0; }\n.ms-media-timeline-labels { display: flex; justify-content: space-between; font-size: 10px; color: #9aa0a6; margin-bottom: 6px; }\n.ms-media-timeline-loading { font-size: 12px; color: #9aa0a6; padding: 4px 0; }\n.ms-media-timeline-hits { font-size: 11px; color: #5f6368; margin-top: 4px; }\n.ms-media-timeline-title { font-size: 11px; font-weight: 700; color: #3c4043; margin-bottom: 4px; letter-spacing: .03em; text-transform: uppercase; }\n.ms-media-timeline-bar .ms-seg-tip { display: none; position: absolute; bottom: 12px; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-media-timeline-seg:hover .ms-seg-tip { display: block; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 90px; height: 90px; border-radius: 14px; }\n.ms-uface-conf-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 0 0 10px 10px; padding: 2px 0; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 02:58:47','2026-05-26 02:58:47','',1359,'https://m5wp.momentry.ddns.net/?p=1694',0,'revision','',0),
(1695,4,'2026-05-26 03:12:01','2026-05-26 03:12:01','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 90px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 90px; height: 90px; border-radius: 14px; }\n.ms-uface-conf-badge { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; background: rgba(0,0,0,.45); border-radius: 0 0 10px 10px; padding: 2px 0; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 03:12:01','2026-05-26 03:12:01','',1359,'https://m5wp.momentry.ddns.net/?p=1695',0,'revision','',0),
(1696,6,'2026-05-26 06:26:32','2026-05-26 06:26:32','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled=\"\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input id=\"msInput\" class=\"ms-input\" type=\"text\" inputmode=\"search\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"搜尋照片或影片關鍵字…\" aria-label=\"Search input\">\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'/search-chat/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n var SEARCH_MODE_KEY = \'momentry_home_search_mode_v1\';\n\nvar currentMode = (\n  localStorage.getItem(SEARCH_MODE_KEY) ||\n  \'keyword\'\n).toLowerCase();\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n  currentMode = value;\n\n  try{\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n  }catch(e){}\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n/* ── 初始化模式 ── */\n(function initSavedMode(){\n\n  var found = false;\n\n  modeItems.forEach(function(item){\n\n    if(item.dataset.value === currentMode){\n\n      found = true;\n\n      setMode(\n        item.dataset.value,\n        item.textContent.trim()\n      );\n    }\n  });\n\n  if(!found){\n    setMode(\'keyword\', \'Keyword\');\n  }\n\n})();\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-26 06:26:32','2026-05-26 06:26:32','',341,'https://m5wp.momentry.ddns.net/?p=1696',0,'revision','',0),
(1697,4,'2026-05-26 06:30:05','2026-05-26 06:30:05','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n<div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\">待定人臉：</div>\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <span class=\"ms-uface-filter-count\" id=\"msPplUfaceCount\"></span>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 06:30:05','2026-05-26 06:30:05','',1359,'https://m5wp.momentry.ddns.net/?p=1697',0,'revision','',0),
(1698,4,'2026-05-26 06:43:06','2026-05-26 06:43:06','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 06:43:06','2026-05-26 06:43:06','',1359,'https://m5wp.momentry.ddns.net/?p=1698',0,'revision','',0),
(1699,1,'2026-05-26 07:05:06','2026-05-26 07:05:06','<!-- wp:shortcode -->\n[momentry_api_logs]\n<!-- /wp:shortcode -->','Logs','','inherit','closed','closed','','1568-revision-v1','','','2026-05-26 07:05:06','2026-05-26 07:05:06','',1568,'https://m5wp.momentry.ddns.net/?p=1699',0,'revision','',0),
(1700,4,'2026-05-26 07:12:12','2026-05-26 07:12:12','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 12px 12px 0 0; }.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:12:12','2026-05-26 07:12:12','',1359,'https://m5wp.momentry.ddns.net/?p=1700',0,'revision','',0),
(1701,4,'2026-05-26 07:12:25','2026-05-26 07:12:25','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:12:25','2026-05-26 07:12:25','',1359,'https://m5wp.momentry.ddns.net/?p=1701',0,'revision','',0),
(1702,4,'2026-05-26 07:13:34','2026-05-26 07:13:34','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 12px 12px 0 0; background-color: #1a1a1a; }.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:13:34','2026-05-26 07:13:34','',1359,'https://m5wp.momentry.ddns.net/?p=1702',0,'revision','',0),
(1703,4,'2026-05-26 07:27:49','2026-05-26 07:27:49','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:27:49','2026-05-26 07:27:49','',1359,'https://m5wp.momentry.ddns.net/?p=1703',0,'revision','',0),
(1704,4,'2026-05-26 07:30:37','2026-05-26 07:30:37','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-thumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; border-radius: 12px 12px 0 0; }.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:30:37','2026-05-26 07:30:37','',1359,'https://m5wp.momentry.ddns.net/?p=1704',0,'revision','',0),
(1705,4,'2026-05-26 07:30:50','2026-05-26 07:30:50','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 07:30:50','2026-05-26 07:30:50','',1359,'https://m5wp.momentry.ddns.net/?p=1705',0,'revision','',0),
(1706,4,'2026-05-26 08:48:20','2026-05-26 08:48:20','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n  <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\">\n    <option value=\"en\">en</option>\n    <option value=\"zh-TW\" selected>zh-TW</option>\n    <option value=\"zh-CN\">zh-CN</option>\n    <option value=\"ja\">ja</option>\n    <option value=\"ko\">ko</option>\n  </select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 08:48:20','2026-05-26 08:48:20','',1359,'https://m5wp.momentry.ddns.net/?p=1706',0,'revision','',0),
(1707,4,'2026-05-26 08:53:03','2026-05-26 08:53:03','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n    <option value=\"en\">en</option>\n    <option value=\"zh-TW\" selected>zh-TW</option>\n    <option value=\"zh-CN\">zh-CN</option>\n    <option value=\"ja\">ja</option>\n    <option value=\"ko\">ko</option>\n  </select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 08:53:03','2026-05-26 08:53:03','',1359,'https://m5wp.momentry.ddns.net/?p=1707',0,'revision','',0),
(1708,4,'2026-05-26 08:57:58','2026-05-26 08:57:58','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\"></div>\n    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 08:57:58','2026-05-26 08:57:58','',1359,'https://m5wp.momentry.ddns.net/?p=1708',0,'revision','',0),
(1709,4,'2026-05-26 09:01:48','2026-05-26 09:01:48','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n  <div class=\"ms-ppl-avatar-upload-hint\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n    </svg>\n  </div>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:01:48','2026-05-26 09:01:48','',1359,'https://m5wp.momentry.ddns.net/?p=1709',0,'revision','',0),
(1710,4,'2026-05-26 09:10:09','2026-05-26 09:10:09','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n  <div class=\"ms-ppl-avatar-upload-hint\">\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n    </svg>\n  </div>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-status-row\">\n  <span class=\"ms-ppl-status-label\">狀態</span>\n  <select class=\"ms-ppl-status-select\" id=\"msPplStatusSelect\">\n    <option value=\"confirmed\">✓ 已確認</option>\n    <option value=\"pending\">⋯ 待定</option>\n    <option value=\"skipped\">✕ 略過</option>\n  </select>\n</div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }\n.ms-ppl-status-label { font-size:12px; font-weight:700; color:#202124; letter-spacing:.03em; min-width:30px; text-align:right; flex-shrink:0; }\n.ms-ppl-status-select { border:1.5px solid #d1d5db; border-radius:999px; padding:3px 12px; font-family:\'DM Sans\',\'Noto Sans TC\',sans-serif; font-size:12px; font-weight:500; color:#5f6368; background:#fff; cursor:pointer; outline:none; transition:border-color .15s; }\n.ms-ppl-status-select:focus { border-color:#202124; }\n.ms-ppl-status-select.status-confirmed { border-color:#34a853; background:#e6f4ea; color:#188038; }\n.ms-ppl-status-select.status-pending   { border-color:#f9ab00; background:#fef9e7; color:#b06000; }\n.ms-ppl-status-select.status-skipped   { border-color:#d93025; background:#fce8e6; color:#b31412; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:10:09','2026-05-26 09:10:09','',1359,'https://m5wp.momentry.ddns.net/?p=1710',0,'revision','',0),
(1711,4,'2026-05-26 09:17:45','2026-05-26 09:17:45','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n    </div>\n  </div>\n  <select class=\"ms-ppl-status-select\" id=\"msPplStatusSelect\" style=\"width:120px;\">\n    <option value=\"confirmed\">✓ 已確認</option>\n    <option value=\"pending\">⋯ 待定</option>\n    <option value=\"skipped\">✕ 略過</option>\n  </select>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }\n.ms-ppl-status-label { font-size:12px; font-weight:700; color:#202124; letter-spacing:.03em; min-width:30px; text-align:right; flex-shrink:0; }\n.ms-ppl-status-select { border:1.5px solid #d1d5db; border-radius:999px; padding:3px 12px; font-family:\'DM Sans\',\'Noto Sans TC\',sans-serif; font-size:12px; font-weight:500; color:#5f6368; background:#fff; cursor:pointer; outline:none; transition:border-color .15s; }\n.ms-ppl-status-select:focus { border-color:#202124; }\n.ms-ppl-status-select.status-confirmed { border-color:#34a853; background:#e6f4ea; color:#188038; }\n.ms-ppl-status-select.status-pending   { border-color:#f9ab00; background:#fef9e7; color:#b06000; }\n.ms-ppl-status-select.status-skipped   { border-color:#d93025; background:#fce8e6; color:#b31412; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:17:45','2026-05-26 09:17:45','',1359,'https://m5wp.momentry.ddns.net/?p=1711',0,'revision','',0),
(1712,4,'2026-05-26 09:18:32','2026-05-26 09:18:32','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n    </div>\n  </div>\n  <select class=\"ms-ppl-status-select\" id=\"msPplStatusSelect\" style=\"width:120px;\">\n    <option value=\"confirmed\">✓ 已確認</option>\n    <option value=\"pending\">⋯ 待定</option>\n    <option value=\"skipped\">✕ 略過</option>\n  </select>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }\n.ms-ppl-status-label { font-size:12px; font-weight:700; color:#202124; letter-spacing:.03em; min-width:30px; text-align:right; flex-shrink:0; }\n.ms-ppl-status-select { border:1.5px solid #d1d5db; border-radius:999px; padding:3px 12px; font-family:\'DM Sans\',\'Noto Sans TC\',sans-serif; font-size:12px; font-weight:500; color:#5f6368; background:#fff; cursor:pointer; outline:none; transition:border-color .15s; }\n.ms-ppl-status-select:focus { border-color:#202124; }\n.ms-ppl-status-select.status-confirmed { border-color:#34a853; background:#fff; color:#188038; }\n.ms-ppl-status-select.status-pending   { border-color:#f9ab00; background:#fff; color:#b06000; }\n.ms-ppl-status-select.status-skipped   { border-color:#d93025; background:#fff; color:#b31412; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:18:32','2026-05-26 09:18:32','',1359,'https://m5wp.momentry.ddns.net/?p=1712',0,'revision','',0),
(1713,4,'2026-05-26 09:19:20','2026-05-26 09:19:20','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n    </div>\n  </div>\n  <select class=\"ms-ppl-status-select\" id=\"msPplStatusSelect\" style=\"width:120px;\">\n    <option value=\"confirmed\">✓ 已確認</option>\n    <option value=\"pending\">⋯ 待定</option>\n    <option value=\"skipped\">✕ 略過</option>\n  </select>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }\n.ms-ppl-status-label { font-size:12px; font-weight:700; color:#202124; letter-spacing:.03em; min-width:30px; text-align:right; flex-shrink:0; }\n.ms-ppl-status-select { border:1.5px solid #d1d5db; border-radius:999px; padding:3px 12px; font-family:\'DM Sans\',\'Noto Sans TC\',sans-serif; font-size:12px; font-weight:500; color:#5f6368; background:#fff; cursor:pointer; outline:none; transition:border-color .15s; }\n.ms-ppl-status-select:focus { border-color:#202124; }\n.ms-ppl-status-select.status-confirmed { border-color:#fff; background:#fff; color:#fff; }\n.ms-ppl-status-select.status-pending   { border-color:#fff; background:#fff; color:#fff; }\n.ms-ppl-status-select.status-skipped   { border-color:#fff; background:#fff; color:#fff; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:19:20','2026-05-26 09:19:20','',1359,'https://m5wp.momentry.ddns.net/?p=1713',0,'revision','',0),
(1714,6,'2026-05-26 09:19:46','2026-05-26 09:19:46','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">The fastest path from moments to intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled=\"\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input id=\"msInput\" class=\"ms-input\" type=\"text\" inputmode=\"search\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"搜尋照片或影片關鍵字…\" aria-label=\"Search input\">\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n/* 隐藏首页底下：最近浏览 / 最新加入 */\n#momentry-app .ms-cards{\n  display:none !important;\n}\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'/search-chat/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n var SEARCH_MODE_KEY = \'momentry_home_search_mode_v1\';\n\nvar currentMode = (\n  localStorage.getItem(SEARCH_MODE_KEY) ||\n  \'keyword\'\n).toLowerCase();\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n  currentMode = value;\n\n  try{\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n  }catch(e){}\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n/* ── 初始化模式 ── */\n(function initSavedMode(){\n\n  var found = false;\n\n  modeItems.forEach(function(item){\n\n    if(item.dataset.value === currentMode){\n\n      found = true;\n\n      setMode(\n        item.dataset.value,\n        item.textContent.trim()\n      );\n    }\n  });\n\n  if(!found){\n    setMode(\'keyword\', \'Keyword\');\n  }\n\n})();\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-26 09:19:46','2026-05-26 09:19:46','',341,'https://m5wp.momentry.ddns.net/?p=1714',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1715,4,'2026-05-26 09:20:43','2026-05-26 09:20:43','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n    </div>\n  </div>\n  <select class=\"ms-ppl-status-select\" id=\"msPplStatusSelect\" style=\"width:120px;\">\n    <option value=\"confirmed\">✓ 已確認</option>\n    <option value=\"pending\">⋯ 待定</option>\n    <option value=\"skipped\">✕ 略過</option>\n  </select>\n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected>繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n</div>\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-status-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }\n.ms-ppl-status-label { font-size:12px; font-weight:700; color:#202124; letter-spacing:.03em; min-width:30px; text-align:right; flex-shrink:0; }\n.ms-ppl-status-select { border:1.5px solid #d1d5db; border-radius:999px; padding:3px 12px; font-family:\'DM Sans\',\'Noto Sans TC\',sans-serif; font-size:12px; font-weight:500; color:#5f6368; background:#fff; cursor:pointer; outline:none; transition:border-color .15s; }\n.ms-ppl-status-select:focus { border-color:#202124; }\n.ms-ppl-status-select.status-confirmed { border-color:oklab(64.673% 0 -0.00007 / 0.71); background:#fff; color:oklab; }\n.ms-ppl-status-select.status-pending   { border-color:oklab; background:#fff; color:oklab; }\n.ms-ppl-status-select.status-skipped   { border-color:oklab; background:#fff; color:oklab; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 09:20:43','2026-05-26 09:20:43','',1359,'https://m5wp.momentry.ddns.net/?p=1715',0,'revision','',0),
(1717,4,'2026-05-26 11:44:47','2026-05-26 11:44:47','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n\n\n\n\n      </div>\n    </div>\n<button class=\"ms-fm-btn ms-ppl-skipped-toggle-btn\" id=\"msPplSkippedToggleBtn\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n    <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n  </svg>\n  已略過\n</button>\n\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\">待定人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 11:44:47','2026-05-26 11:44:47','',1359,'https://m5wp.momentry.ddns.net/?p=1717',0,'revision','',0),
(1718,4,'2026-05-26 11:55:06','2026-05-26 11:55:06','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n\n\n\n\n      </div>\n    </div>\n<button class=\"ms-fm-btn ms-ppl-skipped-toggle-btn\" id=\"msPplSkippedToggleBtn\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n    <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n  </svg>\n  已略過\n</button>\n\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 11:55:06','2026-05-26 11:55:06','',1359,'https://m5wp.momentry.ddns.net/?p=1718',0,'revision','',0),
(1719,4,'2026-05-26 11:57:30','2026-05-26 11:57:30','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋人物名稱\">\n    </div>\n\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time\"> 加入時間</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\"> 最近瀏覽</label>\n          </div>\n        </div>\n\n\n\n\n      </div>\n    </div>\n<button class=\"ms-fm-btn ms-ppl-skipped-toggle-btn\" id=\"msPplSkippedToggleBtn\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n    <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n  </svg>\n  已略過\n</button>\n\n  </div>\n\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\">已知人物：</div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name\" checked> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name\" checked=\"\"> 名稱 A–Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 加入時間</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 11:57:30','2026-05-26 11:57:30','',1359,'https://m5wp.momentry.ddns.net/?p=1719',0,'revision','',0),
(1720,4,'2026-05-26 12:23:13','2026-05-26 12:23:13','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 12:23:13','2026-05-26 12:23:13','',1359,'https://m5wp.momentry.ddns.net/?p=1720',0,'revision','',0),
(1721,4,'2026-05-26 12:33:08','2026-05-26 12:33:08','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: hidden; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 12:33:08','2026-05-26 12:33:08','',1359,'https://m5wp.momentry.ddns.net/?p=1721',0,'revision','',0),
(1722,4,'2026-05-26 12:35:54','2026-05-26 12:35:54','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-26 12:35:54','2026-05-26 12:35:54','',1359,'https://m5wp.momentry.ddns.net/?p=1722',0,'revision','',0),
(1723,4,'2026-05-27 00:52:28','2026-05-27 00:52:28','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-27 00:52:28','2026-05-27 00:52:28','',1359,'https://m5wp.momentry.ddns.net/?p=1723',0,'revision','',0),
(1724,4,'2026-05-27 01:55:47','2026-05-27 01:55:47','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-27 01:55:47','2026-05-27 01:55:47','',1359,'https://m5wp.momentry.ddns.net/?p=1724',0,'revision','',0),
(1725,4,'2026-05-27 02:05:31','2026-05-27 02:05:31','<!-- wp:html -->\n<!-- =========================================================\n  ms-people-html — Snippet 1\n  people 人物管理頁：HTML + CSS\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n  <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n    <span class=\"ms-ppl-star-icon\">★</span>\n    <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n  </button>\n\n  <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div style=\"flex:1;\"></div>\n\n  <!-- ── 區域開關 ── -->\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\" title=\"待定人物\">\n    待定人物\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\" title=\"已略過\">\n    已略過\n  </button>\n  <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\" title=\"待定人臉\">\n    待定人臉\n  </button>\n</div>\n\n\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n<div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n\n<!-- ── 已略過區塊（預設隱藏）── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">\n      編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n<div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n  <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n    <div class=\"ms-ppl-avatar-upload-hint\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      </svg>\n    </div>\n  </div>\n  \n</div>\n<input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">    <div style=\"flex:1;min-width:0;\">\n\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        \n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        \n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n<select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n  <option value=\"en\">English</option>\n  <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n  <option value=\"zh-CN\">简体中文</option>\n  <option value=\"ja\">日本語</option>\n  <option value=\"ko\">한국어</option>\n</select>\n  <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n</div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <!-- ── 刪除區域：最底部 ── -->\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <!-- ── Modal: 刪除人物確認 ── -->\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- ── Modal: 離開確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 (dirty state) ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n\n\n\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n<label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 人臉 grid -->\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Context Menu：人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- ── Context Menu：待定人物卡片右鍵 ── -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n\n<!-- ── Modal: 合併人物 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 確定合併 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 影片播放（放最外層，避免被 display:none 影響）── -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n  <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n  <div class=\"ms-video-tl-labels\">\n    <span id=\"msPplVideoTlStart\">0:00</span>\n    <span id=\"msPplVideoTlEnd\">—</span>\n  </div>\n</div>\n<div class=\"ms-video-nav\">\n  <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n  <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n  <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n</div>\n  </div>\n</div>\n\n<style>\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n.ms-main:has(#msPplViewList) { overflow-x: visible; border-top-left-radius: 0; border-top-right-radius: 0; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-pending { position: absolute; top: 6px; left: 6px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-detail-name { font-size: 20px; font-weight: 700; color: #202124; }\n.ms-ppl-detail-name.placeholder { color: #bdc1c6; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-media-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-thumb-play-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .15s; border-radius: 12px 12px 0 0; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-hint { opacity: 1; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n/* Video modal */\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #fff; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #202124; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #5f6368; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #202124; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #5f6368; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n/* 儲存中狀態 */\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n\n/* 分頁 */\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n\n.ms-silhouette { width: 100%; height: 100%; }\n\n/* ── 時間軸展開區塊 ── */\n/* ── 卡片時間軸（已移除，保留空殼避免 JS 報錯）── */\n.ms-media-timeline-wrap { display: none !important; }\n\n/* ── 播放器 modal 時間軸 ── */\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n/* ── modal 背景改深色讓時間軸看得清楚 ── */\n.ms-modal-video { background: #1a1a1a; }\n.ms-modal-video-title { color: #e8eaed; }\n.ms-modal-video-close { color: #9aa0a6; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-seg-info { color: #9aa0a6; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n\n/* 待定人臉 */\n.ms-uface-filter-count { font-size: 12px; color: #9aa0a6; white-space: nowrap; margin-left: 4px; }\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n.ms-uface-grid .ms-ppl-face-card.uface-selected .ms-ppl-face-img-wrap { outline: 2.5px solid #1a56db; outline-offset: 2px; }\n\n/* 縮圖播放按鈕 */\n.ms-thumb-bg { position:absolute;inset:0;background:#d0d0d0;border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.18);border-radius:12px 12px 0 0; }\n.ms-thumb-play-circle svg { width:38px;height:38px;opacity:.7;transition:opacity .15s,transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity:1;transform:scale(1.08); }\n.ms-ppl-media-badge-conf { position:absolute;bottom:5px;left:6px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em; }\n/* 舊 badge 和 hint 隱藏 */\n.ms-ppl-media-badge { display:none; }\n.ms-thumb-play-hint { display:none; }\n\n.ms-ppl-alias-locale-select {\n  border: 1.5px solid #1a56db;\n  border-radius: 999px;\n  padding: 4px 10px;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 12px;\n  color: #202124;\n  background: #fff;\n  outline: none;\n  cursor: pointer;\n  height: 30px;\n}\n\n.ms-ppl-detail-avatar { cursor: pointer; position: relative; }\n.ms-ppl-avatar-upload-hint {\n  position: absolute; inset: 0; border-radius: 20px;\n  background: rgba(0,0,0,.45); display: flex; align-items: center;\n  justify-content: center; opacity: 0; transition: opacity .15s;\n  pointer-events: none;\n}\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n/* 已略過卡片：灰階 + 透明度 */\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n/* 已略過 toggle 按鈕 */\n.ms-ppl-skipped-toggle-btn { color: #9aa0a6; border-color: #e8eaed; font-size: 13px; }\n.ms-ppl-skipped-toggle-btn.active { background: #f3f4f6; border-color: #9aa0a6; color: #5f6368; }\n.ms-ppl-skipped-toggle-btn svg { color: #9aa0a6; }\n\n/* ── section toolbar（各區塊的標題列）── */\n.ms-ppl-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 16px;\n  flex-wrap: nowrap;\n}\n\n/* ── 區域開關按鈕 ── */\n.ms-ppl-section-toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 999px;\n  border: 1.5px solid #d1d5db;\n  background: #fff;\n  font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  color: #9aa0a6;\n  cursor: pointer;\n  outline: none;\n  transition: all .15s;\n  white-space: nowrap;\n}\n.ms-ppl-section-toggle-btn::before {\n  content: \'\';\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #d1d5db;\n  flex-shrink: 0;\n  transition: background .15s;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"] {\n  border-color: #202124;\n  color: #202124;\n  background: #fff;\n}\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before {\n  background: #202124;\n}\n.ms-ppl-section-toggle-btn:hover {\n  border-color: #5f6368;\n  color: #5f6368;\n}\n\n</style>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-27 02:05:31','2026-05-27 02:05:31','',1359,'https://m5wp.momentry.ddns.net/?p=1725',0,'revision','',0),
(1727,6,'2026-05-27 09:47:22','2026-05-27 09:47:22','<!-- wp:html -->\n<!-- 搜索栏 + Search Lab 页面 - 编辑器友好版 -->\n<div id=\"ms-view-search\" style=\"font-family:sans-serif; padding:16px;\">\n  <!-- 顶部操作按钮 -->\n  <div class=\"topbar\" style=\"display:flex; gap:8px; align-items:center; margin-bottom:12px;\">\n    <button class=\"icobtn\">註冊</button>\n    <button class=\"icobtn\" id=\"msRefreshBtn\">🔄</button>\n\n    <label><input type=\"radio\" name=\"msFilter\" value=\"all\" checked> 全部</label>\n    <label><input type=\"radio\" name=\"msFilter\" value=\"video\"> 全部影片</label>\n    <label><input type=\"radio\" name=\"msFilter\" value=\"image\"> 全部照片</label>\n  </div>\n\n  <!-- 搜索输入栏 -->\n  <div class=\"ibar\" style=\"display:flex; gap:8px; align-items:center; margin-bottom:16px;\">\n    <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\" style=\"flex:1; padding:6px 8px; border:1px solid #ccc; border-radius:12px;\">\n    <button class=\"menuBtn\">☰</button>\n  </div>\n</div>\n\n<!-- Search Lab 页面 -->\n<div id=\"ms-view-searchlab\" style=\"font-family:sans-serif; padding:16px;\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab</h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口，以下顯示真實 API 數據。</p>\n  </div>\n\n  <div class=\"ms-lab-grid\" style=\"display:flex; gap:16px; flex-wrap:wrap;\">\n    <!-- 評估觸發區塊 -->\n    <div class=\"ms-lab-card\" style=\"border:1px solid #ddd; padding:12px; border-radius:6px; flex:1 1 250px;\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <button id=\"msRunEvalBtn\" style=\"margin-top:8px; padding:6px 12px; border-radius:6px; border:1px solid #aaa; cursor:pointer;\">▶ Run Evaluation</button>\n      <span style=\"display:block; margin-top:4px; color:#666; font-size:0.9em;\">點擊後將呼叫後端 API 取得真實數據</span>\n      <div id=\"msEvalToast\" style=\"display:none; margin-top:6px; color:#16a34a; font-weight:bold;\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n\n    <!-- 指標區塊 -->\n    <div class=\"ms-lab-card\" style=\"border:1px solid #ddd; padding:12px; border-radius:6px; flex:1 1 250px;\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\" style=\"display:flex; gap:12px; margin-top:8px;\">\n        <div class=\"ms-metric-item\" style=\"flex:1; text-align:center; border:1px solid #eee; border-radius:4px; padding:8px;\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\" id=\"metricHit3\">-</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\" style=\"flex:1; text-align:center; border:1px solid #eee; border-radius:4px; padding:8px;\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\" id=\"metricMRR\">-</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\" style=\"flex:1; text-align:center; border:1px solid #eee; border-radius:4px; padding:8px;\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\" id=\"metricTimeError\">-</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n    </div>\n\n    <!-- 最近評估區塊 -->\n    <div class=\"ms-lab-card\" style=\"border:1px solid #ddd; padding:12px; border-radius:6px; flex:1 1 250px;\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\" style=\"display:flex; gap:8px; align-items:center; margin-top:8px;\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">-</div>\n          <div class=\"ms-last-eval-meta\" id=\"msLastRunMeta\">-</div>\n        </div>\n        <div class=\"ms-last-eval-status\" id=\"msLastRunStatus\">-</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- JS 外置，编辑器预览干净 -->\n<script src=\"/wp-content/uploads/js/search-lab.js\"></script>\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:47:22','2026-05-27 09:47:22','',523,'https://m5wp.momentry.ddns.net/?p=1727',0,'revision','',0),
(1728,6,'2026-05-27 09:47:33','2026-05-27 09:47:33','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:47:33','2026-05-27 09:47:33','',523,'https://m5wp.momentry.ddns.net/?p=1728',0,'revision','',0),
(1729,6,'2026-05-27 09:51:17','2026-05-27 09:51:17','<!-- wp:html -->\n<!-- 搜索栏页面 HTML - 精简版 -->\n<div id=\"ms-view-search\" style=\"font-family:sans-serif; padding:16px;\">\n  <!-- 顶部操作按钮 -->\n  <div class=\"topbar\" style=\"display:flex; gap:8px; align-items:center; margin-bottom:12px;\">\n    <button class=\"icobtn\">註冊</button>\n    <button class=\"icobtn\" id=\"msRefreshBtn\">🔄</button>\n\n    <label><input type=\"radio\" name=\"msFilter\" value=\"all\" checked> 全部</label>\n    <label><input type=\"radio\" name=\"msFilter\" value=\"video\"> 全部影片</label>\n    <label><input type=\"radio\" name=\"msFilter\" value=\"image\"> 全部照片</label>\n  </div>\n\n  <!-- 搜索输入栏 -->\n  <div class=\"ibar\" style=\"display:flex; gap:8px; align-items:center; margin-bottom:16px;\">\n    <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\" style=\"flex:1; padding:6px 8px; border:1px solid #ccc; border-radius:12px;\">\n    <button class=\"menuBtn\">☰</button>\n  </div>\n</div>\n\n<!-- JS 外置，编辑器预览干净 -->\n<script src=\"/wp-content/uploads/js/search.js\"></script>\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:51:17','2026-05-27 09:51:17','',523,'https://m5wp.momentry.ddns.net/?p=1729',0,'revision','',0),
(1730,6,'2026-05-27 09:51:48','2026-05-27 09:51:48','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:51:48','2026-05-27 09:51:48','',523,'https://m5wp.momentry.ddns.net/?p=1730',0,'revision','',0),
(1731,6,'2026-05-27 09:52:41','2026-05-27 09:52:41','<!-- wp:html -->\n<!-- 完整水平对齐搜索栏 HTML - 适合 WordPress -->\n<div id=\"ms-view-search\" style=\"font-family:sans-serif; padding:16px;\">\n\n  <!-- 水平对齐搜索栏容器 -->\n  <div class=\"search-bar\" style=\"display:flex; align-items:center; gap:8px; flex-wrap:wrap;\">\n    <button class=\"icobtn\" style=\"height:36px; padding:0 12px; border-radius:6px;\">註冊</button>\n    <button class=\"icobtn\" id=\"msRefreshBtn\" style=\"height:36px; padding:0 12px; border-radius:6px;\">🔄</button>\n\n    <label style=\"display:flex; align-items:center; gap:4px;\"><input type=\"radio\" name=\"msFilter\" value=\"all\" checked> 全部</label>\n    <label style=\"display:flex; align-items:center; gap:4px;\"><input type=\"radio\" name=\"msFilter\" value=\"video\"> 全部影片</label>\n    <label style=\"display:flex; align-items:center; gap:4px;\"><input type=\"radio\" name=\"msFilter\" value=\"image\"> 全部照片</label>\n\n    <input class=\"ifield\" placeholder=\"搜尋檔案 / 文件 / 影片 / DOC\" style=\"flex:1; min-width:200px; padding:6px 12px; border-radius:12px; border:1px solid #ccc; height:36px;\">\n    <button class=\"menuBtn\" style=\"height:36px; padding:0 12px; border-radius:6px;\">☰</button>\n  </div>\n\n</div>\n\n<!-- 外置 JS，保持编辑器预览干净 -->\n<script src=\"/wp-content/uploads/js/search.js\"></script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:52:41','2026-05-27 09:52:41','',523,'https://m5wp.momentry.ddns.net/?p=1731',0,'revision','',0),
(1732,6,'2026-05-27 09:52:52','2026-05-27 09:52:52','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:52:52','2026-05-27 09:52:52','',523,'https://m5wp.momentry.ddns.net/?p=1732',0,'revision','',0),
(1733,6,'2026-05-27 09:54:45','2026-05-27 09:54:45','<!-- wp:html -->\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 09:54:45','2026-05-27 09:54:45','',523,'https://m5wp.momentry.ddns.net/?p=1733',0,'revision','',0),
(1735,6,'2026-05-27 16:01:16','2026-05-27 16:01:16','<!-- wp:html -->\n<!-- 搜尋主畫面完整版 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <!-- 頂部工具欄 -->\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path>\n          </svg>\n        </button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </button>\n      </div>\n      <div id=\"msBK\">\n        <div class=\"bkh\">\n          <span class=\"bkht\">書籤</span>\n          <button class=\"bkx\" id=\"msBKX\">✕</button>\n        </div>\n        <div id=\"msBKL\"></div>\n      </div>\n    </div>\n\n    <!-- 聊天/搜索結果區 -->\n    <div class=\"chat\" id=\"msChat\"></div>\n\n    <!-- 底部輸入欄 -->\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n\n        <!-- 搜尋模式選單 -->\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n            <span id=\"msChatModeLabel\">Keyword</span>\n            <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>Keyword</span>\n            </div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>Semantic</span>\n            </div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>People</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- 語音按鈕 -->\n        <button class=\"micbtn\" title=\"語音輸入\">\n          <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path>\n            <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n            <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 可加入原本的 JS 初始化 -->\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const chatInput = document.getElementById(\'msInp\');\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n\n  // 切換模式選單\n  modeBtn.addEventListener(\'click\', ()=>{ modeMenu.classList.toggle(\'active\'); });\n\n  // 選擇模式\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n    });\n  });\n});\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:01:16','2026-05-27 16:01:16','',523,'https://m5wp.momentry.ddns.net/?p=1735',0,'revision','',0),
(1736,6,'2026-05-27 16:03:32','2026-05-27 16:03:32','<!-- wp:html -->\n<!-- 搜尋主畫面完整版（可覆盖） -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <!-- 顶部工具栏 -->\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path>\n          </svg>\n        </button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n        </button>\n      </div>\n      <div id=\"msBK\">\n        <div class=\"bkh\">\n          <span class=\"bkht\">書籤</span>\n          <button class=\"bkx\" id=\"msBKX\">✕</button>\n        </div>\n        <div id=\"msBKL\"></div>\n      </div>\n    </div>\n\n    <!-- 聊天框 -->\n    <div class=\"chat\" id=\"msChat\"></div>\n\n    <!-- 底部输入栏 -->\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n        </svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n\n        <!-- 三模式選擇 -->\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n            <span id=\"msChatModeLabel\">Keyword</span>\n            <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>Keyword</span>\n            </div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>Semantic</span>\n            </div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">\n              <span class=\"ms-chat-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              <span>People</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- 语音输入 -->\n        <button class=\"micbtn\" title=\"語音輸入\">\n          <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path>\n            <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path>\n            <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line>\n            <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- JS: 模式切换 -->\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n\n  modeBtn.addEventListener(\'click\', () => modeMenu.classList.toggle(\'active\'));\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n    });\n  });\n});\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:03:32','2026-05-27 16:03:32','',523,'https://m5wp.momentry.ddns.net/?p=1736',0,'revision','',0),
(1737,6,'2026-05-27 16:04:54','2026-05-27 16:04:54','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:04:54','2026-05-27 16:04:54','',523,'https://m5wp.momentry.ddns.net/?p=1737',0,'revision','',0),
(1738,6,'2026-05-27 16:11:01','2026-05-27 16:11:01','<!-- wp:html -->\n<!-- Momentry 搜索页面 - HTML + 独立 JS，保留 PHP snippet -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <!-- 顶部工具栏 -->\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">📌</button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">🔍</button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n\n    <!-- 聊天区 / 搜索结果 -->\n    <div class=\"chat\" id=\"msChat\"></div>\n\n    <!-- 底部输入栏 -->\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n\n        <!-- 三模式选择 -->\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\">\n            <span id=\"msChatModeLabel\">Keyword</span> <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">Keyword</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">Semantic</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">People</div>\n          </div>\n        </div>\n\n        <!-- 语音输入按钮 -->\n        <button class=\"micbtn\" title=\"語音輸入\">🎤</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- 独立 JS: 搜索模式 + 调用 PHP snippet -->\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n  const searchInput = document.getElementById(\'msInp\');\n  const chatArea = document.getElementById(\'msChat\');\n\n  // 切换模式下拉\n  modeBtn.addEventListener(\'click\', ()=> modeMenu.classList.toggle(\'active\'));\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n\n      // 调用搜索\n      doSearch(searchInput.value, item.dataset.value);\n    });\n  });\n\n  // 输入框回车搜索\n  searchInput.addEventListener(\'keydown\', function(e){\n    if(e.key === \'Enter\'){\n      const mode = modeMenu.querySelector(\'.ms-chat-mode-item.is-active\').dataset.value;\n      doSearch(searchInput.value, mode);\n    }\n  });\n\n  // 独立搜索函数，调用 PHP snippet API\n  function doSearch(query, mode){\n    if(!query) return;\n    fetch(`/wp-json/momentry/v1/library-scan-proxy?query=${encodeURIComponent(query)}&mode=${encodeURIComponent(mode)}`)\n      .then(res=>res.json())\n      .then(data=>{\n        chatArea.innerHTML = \'\';\n        data.results?.forEach(item=>{\n          const div = document.createElement(\'div\');\n          div.className = \'chat-item\';\n          div.textContent = item.name || item.file_name || \'Unnamed\';\n          chatArea.appendChild(div);\n        });\n      })\n      .catch(err=>{\n        console.error(\'Search failed\', err);\n      });\n  }\n});\n</script>\n\n<!-- 样式保持原版，可加上你的 CSS -->\n<style>\n/* 下拉菜单样式 */\n.ms-chat-mode-wrap { position: relative; display: inline-block; margin-left: 12px; }\n.ms-chat-mode-btn { padding: 6px 12px; border-radius: 12px; border:1px solid #ccc; cursor:pointer; background:#fff; }\n.ms-chat-mode-arrow { margin-left: 4px; }\n.ms-chat-mode-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #ccc; border-radius:8px; padding:4px 0; z-index:100; min-width:100px; }\n.ms-chat-mode-menu.active { display:block; }\n.ms-chat-mode-item { padding:6px 12px; cursor:pointer; }\n.ms-chat-mode-item:hover, .ms-chat-mode-item.is-active { background:#f0f0f0; }\n</style>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:11:01','2026-05-27 16:11:01','',523,'https://m5wp.momentry.ddns.net/?p=1738',0,'revision','',0),
(1739,6,'2026-05-27 16:12:12','2026-05-27 16:12:12','<!-- wp:html -->\n<!-- Momentry 搜索页面 - HTML + 独立 JS -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <!-- 顶部工具栏 -->\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">📌</button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">🔍</button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n\n    <!-- 聊天区 / 搜索结果 -->\n    <div class=\"chat\" id=\"msChat\" style=\"min-height:300px;\"></div>\n\n    <!-- 底部输入栏 -->\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n\n        <!-- 三模式选择 -->\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\">\n            <span id=\"msChatModeLabel\">Keyword</span> <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">Keyword</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">Semantic</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">People</div>\n          </div>\n        </div>\n\n        <!-- 语音输入按钮 -->\n        <button class=\"micbtn\" title=\"語音輸入\">🎤</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n.ms-chat-mode-wrap { position: relative; display: inline-block; margin-left: 12px; }\n.ms-chat-mode-btn { padding: 6px 12px; border-radius: 12px; border:1px solid #ccc; cursor:pointer; background:#fff; }\n.ms-chat-mode-arrow { margin-left: 4px; }\n.ms-chat-mode-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #ccc; border-radius:8px; padding:4px 0; z-index:100; min-width:100px; }\n.ms-chat-mode-menu.active { display:block; }\n.ms-chat-mode-item { padding:6px 12px; cursor:pointer; }\n.ms-chat-mode-item:hover, .ms-chat-mode-item.is-active { background:#f0f0f0; }\n.chat .chat-item { padding:6px 10px; border-bottom:1px solid #eee; }\n</style>\n\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n  const searchInput = document.getElementById(\'msInp\');\n  const chatArea = document.getElementById(\'msChat\');\n\n  // 切换模式下拉\n  modeBtn.addEventListener(\'click\', ()=> modeMenu.classList.toggle(\'active\'));\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n      doSearch(searchInput.value, item.dataset.value);\n    });\n  });\n\n  // 输入框回车搜索\n  searchInput.addEventListener(\'keydown\', function(e){\n    if(e.key === \'Enter\'){\n      const mode = modeMenu.querySelector(\'.ms-chat-mode-item.is-active\').dataset.value;\n      doSearch(searchInput.value, mode);\n    }\n  });\n\n  // 独立搜索函数，调用 PHP snippet API\n  function doSearch(query, mode){\n    if(!query) return;\n    fetch(`/wp-json/momentry/v1/library-scan-proxy?query=${encodeURIComponent(query)}&mode=${encodeURIComponent(mode)}`)\n      .then(res=>res.json())\n      .then(data=>{\n        chatArea.innerHTML = \'\';\n        data.results?.forEach(item=>{\n          const div = document.createElement(\'div\');\n          div.className = \'chat-item\';\n          div.textContent = item.name || item.file_name || \'Unnamed\';\n          chatArea.appendChild(div);\n        });\n      })\n      .catch(err=>console.error(\'Search failed\', err));\n  }\n});\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:12:12','2026-05-27 16:12:12','',523,'https://m5wp.momentry.ddns.net/?p=1739',0,'revision','',0),
(1741,6,'2026-05-27 16:13:15','2026-05-27 16:13:15','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:13:15','2026-05-27 16:13:15','',523,'https://m5wp.momentry.ddns.net/?p=1741',0,'revision','',0),
(1742,6,'2026-05-27 16:16:42','2026-05-27 16:16:42','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:16:42','2026-05-27 16:16:42','',523,'https://m5wp.momentry.ddns.net/?p=1742',0,'revision','',0),
(1743,6,'2026-05-27 16:23:43','2026-05-27 16:23:43','<!-- wp:html -->\n<?php\n/*\nTemplate Name: Momentry Search Page\nDescription: A unified page template for Momentry Studio Search integrating PHP snippet functionality.\n*/\nget_header();\n\n// Load necessary PHP snippet logic here (integrate your original snippet functions)\n// Example: API calls, file status handling, thumbnail generation\n\n?>\n\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <!-- Top bar -->\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">📌</button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">🔍</button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n\n    <!-- Chat/Search Results -->\n    <div class=\"chat\" id=\"msChat\" style=\"min-height:300px;\"></div>\n\n    <!-- Bottom search bar -->\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <!-- Search modes -->\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\">\n            <span id=\"msChatModeLabel\">Keyword</span> <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">Keyword</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">Semantic</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">People</div>\n          </div>\n        </div>\n        <button class=\"micbtn\" title=\"語音輸入\">🎤</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n/* Add your CSS styling here: copy styles from Page HTML and snippet */\n</style>\n\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n  const searchInput = document.getElementById(\'msInp\');\n  const chatArea = document.getElementById(\'msChat\');\n\n  // Toggle mode menu\n  modeBtn.addEventListener(\'click\', ()=> modeMenu.classList.toggle(\'active\'));\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n      doSearch(searchInput.value, item.dataset.value);\n    });\n  });\n\n  // Enter key search\n  searchInput.addEventListener(\'keydown\', function(e){\n    if(e.key === \'Enter\'){\n      const mode = modeMenu.querySelector(\'.ms-chat-mode-item.is-active\').dataset.value;\n      doSearch(searchInput.value, mode);\n    }\n  });\n\n  // Integrate PHP snippet logic directly here (via AJAX or inline PHP output)\n  function doSearch(query, mode){\n    if(!query) return;\n\n    fetch(`<?php echo esc_url(rest_url(\'momentry/v1/library-scan-proxy\')); ?>?query=${encodeURIComponent(query)}&mode=${encodeURIComponent(mode)}`)\n      .then(res=>res.json())\n      .then(data=>{\n        renderFilesToChat(data.results || []);\n      }).catch(err=>console.error(err));\n  }\n\n  function renderFilesToChat(items){\n    chatArea.innerHTML = \'\';\n    items.forEach(item=>{\n      const div = document.createElement(\'div\');\n      div.className = \'chat-item\';\n      div.innerHTML = `\n        <div class=\"cthumb\"><img src=\"<?php echo esc_url(home_url(\'/wp-json/momentry/v1/media?uuid=\')); ?>${encodeURIComponent(item.id)}&type=thumbnail\"/></div>\n        <div class=\"cbody\">\n          <div class=\"cname\">${item.name || item.file_name || \'Unnamed\'}</div>\n          <div class=\"cmeta\">${item.type || \'File\'} · ${item.status || \'Unknown\'}</div>\n        </div>\n      `;\n      chatArea.appendChild(div);\n    });\n  }\n});\n</script>\n\n<?php get_footer(); ?>\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:23:43','2026-05-27 16:23:43','',523,'https://m5wp.momentry.ddns.net/?p=1743',0,'revision','',0),
(1744,6,'2026-05-27 16:25:47','2026-05-27 16:25:47','<!-- wp:html -->\n<?php\n/*\nTemplate Name: Momentry Search Page - Full PHP Integration\nDescription: Unified page template integrating full PHP snippet functionality into the page, independent of external snippet.\n*/\nget_header();\n\n// ----------------------------\n// Full PHP snippet logic begins\n// ----------------------------\n\n// Example of scan API, media retrieval, file status logic\n// Replace the following with your full PHP snippet code\n// All API calls, data processing, thumbnail/video handling included\n\nfunction momentry_get_library_results($query, $mode) {\n    $results = [];\n\n    // Your full PHP snippet logic here:\n    // - Scan / fetch library files\n    // - Determine status (registered, probed, etc.)\n    // - Generate thumbnail/video URLs\n    // - Filter by mode: keyword, semantic, people\n\n    // Example placeholder logic (replace with your snippet code):\n    /*\n    $files = scan_library_api($query);\n    foreach($files as $file) {\n        $results[] = [\n            \'id\' => $file[\'uuid\'],\n            \'name\' => $file[\'name\'],\n            \'type\' => $file[\'type\'],\n            \'status\' => $file[\'status\'] ?? \'Unknown\',\n        ];\n    }\n    */\n\n    return $results;\n}\n\n// ----------------------------\n// End full PHP snippet logic\n// ----------------------------\n\n?>\n\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">📌</button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">🔍</button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n\n    <div class=\"chat\" id=\"msChat\" style=\"min-height:300px;\">\n      <?php\n      // On initial page load, optionally render recent items\n      $initial_results = momentry_get_library_results(\'\', \'keyword\');\n      foreach($initial_results as $item) {\n          echo \'<div class=\"chat-item\">\';\n          echo \'<div class=\"cthumb\"><img src=\"/wp-json/momentry/v1/media?uuid=\' . esc_attr($item[\'id\']) . \'&type=thumbnail\"></div>\';\n          echo \'<div class=\"cbody\">\';\n          echo \'<div class=\"cname\">\' . esc_html($item[\'name\']) . \'</div>\';\n          echo \'<div class=\"cmeta\">\' . esc_html($item[\'type\']) . \' · \' . esc_html($item[\'status\']) . \'</div>\';\n          echo \'</div></div>\';\n      }\n      ?>\n    </div>\n\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n          <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\">\n            <span id=\"msChatModeLabel\">Keyword</span> <span class=\"ms-chat-mode-arrow\">⌄</span>\n          </button>\n          <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n            <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">Keyword</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"semantic\">Semantic</div>\n            <div class=\"ms-chat-mode-item\" data-value=\"people\">People</div>\n          </div>\n        </div>\n        <button class=\"micbtn\" title=\"語音輸入\">🎤</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n.ms-chat-mode-wrap { position: relative; display: inline-block; margin-left: 12px; }\n.ms-chat-mode-btn { padding: 6px 12px; border-radius: 12px; border:1px solid #ccc; cursor:pointer; background:#fff; }\n.ms-chat-mode-arrow { margin-left: 4px; }\n.ms-chat-mode-menu { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid #ccc; border-radius:8px; padding:4px 0; z-index:100; min-width:100px; }\n.ms-chat-mode-menu.active { display:block; }\n.ms-chat-mode-item { padding:6px 12px; cursor:pointer; }\n.ms-chat-mode-item:hover, .ms-chat-mode-item.is-active { background:#f0f0f0; }\n.chat .chat-item { padding:6px 10px; border-bottom:1px solid #eee; display:flex; gap:10px; }\n.cthumb img { width:80px; height:60px; object-fit:cover; border-radius:6px; }\n.cbody { flex:1; display:flex; flex-direction:column; justify-content:center; }\n.cname { font-weight:600; font-size:13px; color:#111; }\n.cmeta { font-size:11px; color:#555; }\n</style>\n\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  const modeBtn = document.getElementById(\'msChatModeBtn\');\n  const modeMenu = document.getElementById(\'msChatModeMenu\');\n  const modeLabel = document.getElementById(\'msChatModeLabel\');\n  const searchInput = document.getElementById(\'msInp\');\n  const chatArea = document.getElementById(\'msChat\');\n\n  modeBtn.addEventListener(\'click\', ()=> modeMenu.classList.toggle(\'active\'));\n  modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(item=>{\n    item.addEventListener(\'click\', ()=>{\n      modeMenu.classList.remove(\'active\');\n      modeLabel.textContent = item.dataset.value.charAt(0).toUpperCase() + item.dataset.value.slice(1);\n      modeMenu.querySelectorAll(\'.ms-chat-mode-item\').forEach(i=>i.classList.remove(\'is-active\'));\n      item.classList.add(\'is-active\');\n      searchLibrary(searchInput.value, item.dataset.value);\n    });\n  });\n\n  searchInput.addEventListener(\'keydown\', function(e){\n    if(e.key === \'Enter\'){\n      const mode = modeMenu.querySelector(\'.ms-chat-mode-item.is-active\').dataset.value;\n      searchLibrary(searchInput.value, mode);\n    }\n  });\n\n  function searchLibrary(query, mode){\n    if(!query) return;\n    fetch(`<?php echo esc_url(rest_url(\'momentry/v1/library-scan-proxy\')); ?>?query=${encodeURIComponent(query)}&mode=${encodeURIComponent(mode)}`)\n      .then(res=>res.json())\n      .then(data=>{\n        chatArea.innerHTML = \'\';\n        data.results?.forEach(item=>{\n          const div = document.createElement(\'div\');\n          div.className = \'chat-item\';\n          div.innerHTML = `\n            <div class=\"cthumb\"><img src=\"/wp-json/momentry/v1/media?uuid=${encodeURIComponent(item.id)}&type=thumbnail\"/></div>\n            <div class=\"cbody\">\n              <div class=\"cname\">${item.name || item.file_name || \'Unnamed\'}</div>\n              <div class=\"cmeta\">${item.type || \'File\'} · ${item.status || \'Unknown\'}</div>\n            </div>\n          `;\n          chatArea.appendChild(div);\n        });\n      }).catch(err=>console.error(err));\n  }\n});\n</script>\n\n<?php get_footer(); ?>\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:25:47','2026-05-27 16:25:47','',523,'https://m5wp.momentry.ddns.net/?p=1744',0,'revision','',0),
(1745,6,'2026-05-27 16:26:25','2026-05-27 16:26:25','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4h6v2\"/></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:26:25','2026-05-27 16:26:25','',523,'https://m5wp.momentry.ddns.net/?p=1745',0,'revision','',0),
(1746,6,'2026-05-27 16:38:30','2026-05-27 16:38:30','<!-- wp:html -->\n<!-- ===========================\n     search-chat 完整搜索栏\n     包含三种搜索模式\n     =========================== -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\">📑</button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\">💬</button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n\n    <div class=\"chat\" id=\"msChat\"></div>\n\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\">🔍</svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        \n        <!-- 搜索模式按钮 -->\n        <div class=\"sc-mode-wrap\" id=\"scModeWrap\">\n          <button class=\"sc-mode-btn\" id=\"scModeBtn\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span id=\"scModeLabel\">Keyword</span>\n            <svg class=\"sc-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n          <ul class=\"sc-mode-menu\" id=\"scModeMenu\" role=\"listbox\">\n            <li class=\"sc-mode-item is-active\" data-value=\"keyword\" role=\"option\" aria-selected=\"true\">Keyword</li>\n            <li class=\"sc-mode-item\" data-value=\"semantic\" role=\"option\" aria-selected=\"false\">Semantic</li>\n            <li class=\"sc-mode-item\" data-value=\"people\" role=\"option\" aria-selected=\"false\">People</li>\n          </ul>\n        </div>\n\n        <button class=\"micbtn\" title=\"語音輸入\">🎤</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style>\n/* ===== 搜索模式样式 ===== */\n.sc-mode-wrap { position: relative; display: inline-block; margin-left: 8px; }\n.sc-mode-btn {\n  display:flex; align-items:center; gap:4px;\n  padding:4px 10px; border-radius:999px; border:none;\n  background:#f3f3f3; cursor:pointer; font-size:13px;\n}\n.sc-mode-btn:hover { background:#e5e5e5; }\n.sc-mode-menu {\n  position:absolute; top:calc(100% + 6px); right:0;\n  list-style:none; margin:0; padding:6px 0;\n  background:#fff; border:1px solid #ddd; border-radius:12px;\n  box-shadow:0 4px 12px rgba(0,0,0,.1);\n  display:none;\n}\n.sc-mode-menu.is-open { display:block; }\n.sc-mode-item {\n  padding:6px 12px; cursor:pointer; display:flex; align-items:center;\n}\n.sc-mode-item:hover { background:#f5f5f5; }\n.sc-mode-item.is-active { background:#e0e0e0; font-weight:600; }\n</style>\n\n<script>\n(function(){\n  \'use strict\';\n\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n  // 初始化模式\n  var found=false;\n  modeItems.forEach(function(item){ if(item.dataset.value===currentMode){ setMode(item.dataset.value, item.textContent.trim()); found=true; } });\n  if(!found) setMode(\'keyword\',\'Keyword\');\n\n  // 集成现有 search-chat send() 方法\n  var input = document.getElementById(\'msInp\');\n  if(input){\n    var isComposing=false;\n    input.addEventListener(\'compositionstart\', function(){ isComposing=true; });\n    input.addEventListener(\'compositionend\', function(){ isComposing=false; });\n    input.addEventListener(\'keydown\', function(e){\n      if(isComposing) return;\n      if(e.key===\'Enter\' && !e.shiftKey){\n        e.preventDefault();\n        var val = input.value.trim();\n        if(val && typeof window.send===\'function\'){ \n          window.send(val); \n        }\n      }\n    });\n  }\n\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:38:30','2026-05-27 16:38:30','',523,'https://m5wp.momentry.ddns.net/?p=1746',0,'revision','',0),
(1747,6,'2026-05-27 16:39:24','2026-05-27 16:39:24','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:39:24','2026-05-27 16:39:24','',523,'https://m5wp.momentry.ddns.net/?p=1747',0,'revision','',0),
(1748,6,'2026-05-27 16:42:19','2026-05-27 16:42:19','<!-- wp:html -->\n<script data-wp-block-html=\"js\">\n<script>\n(function(){\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n})();\n</script>\n</script>\n\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}\n.sc-mode-wrap { position: relative; display: inline-block; margin-left: 8px; }\n.sc-mode-btn {\n  display:flex; align-items:center; gap:4px;\n  padding:4px 10px; border-radius:999px; border:none;\n  background:#f3f3f3; cursor:pointer; font-size:13px;\n}\n.sc-mode-btn:hover { background:#e5e5e5; }\n.sc-mode-menu {\n  position:absolute; top:calc(100% + 6px); right:0;\n  list-style:none; margin:0; padding:6px 0;\n  background:#fff; border:1px solid #ddd; border-radius:12px;\n  box-shadow:0 4px 12px rgba(0,0,0,.1);\n  display:none;\n}\n.sc-mode-menu.is-open { display:block; }\n.sc-mode-item {\n  padding:6px 12px; cursor:pointer; display:flex; align-items:center;\n}\n.sc-mode-item:hover { background:#f5f5f5; }\n.sc-mode-item.is-active { background:#e0e0e0; font-weight:600; }\n\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\"><div class=\"sc-mode-wrap\" id=\"scModeWrap\">\n  <button class=\"sc-mode-btn\" id=\"scModeBtn\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n    <span id=\"scModeLabel\">Keyword</span>\n    <svg class=\"sc-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n  <ul class=\"sc-mode-menu\" id=\"scModeMenu\" role=\"listbox\">\n    <li class=\"sc-mode-item is-active\" data-value=\"keyword\" role=\"option\" aria-selected=\"true\">Keyword</li>\n    <li class=\"sc-mode-item\" data-value=\"semantic\" role=\"option\" aria-selected=\"false\">Semantic</li>\n    <li class=\"sc-mode-item\" data-value=\"people\" role=\"option\" aria-selected=\"false\">People</li>\n  </ul>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:42:19','2026-05-27 16:42:19','',523,'https://m5wp.momentry.ddns.net/?p=1748',0,'revision','',0);
INSERT INTO `wp_posts` VALUES
(1749,6,'2026-05-27 16:44:50','2026-05-27 16:44:50','<!-- wp:html -->\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}\n.sc-mode-wrap { position: relative; display: inline-block; margin-left: 8px; }\n.sc-mode-btn {\n  display:flex; align-items:center; gap:4px;\n  padding:4px 10px; border-radius:999px; border:none;\n  background:#f3f3f3; cursor:pointer; font-size:13px;\n}\n.sc-mode-btn:hover { background:#e5e5e5; }\n.sc-mode-menu {\n  position:absolute; top:calc(100% + 6px); right:0;\n  list-style:none; margin:0; padding:6px 0;\n  background:#fff; border:1px solid #ddd; border-radius:12px;\n  box-shadow:0 4px 12px rgba(0,0,0,.1);\n  display:none;\n}\n.sc-mode-menu.is-open { display:block; }\n.sc-mode-item {\n  padding:6px 12px; cursor:pointer; display:flex; align-items:center;\n}\n.sc-mode-item:hover { background:#f5f5f5; }\n.sc-mode-item.is-active { background:#e0e0e0; font-weight:600; }\n\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\"><div class=\"sc-mode-wrap\" id=\"scModeWrap\">\n  <button class=\"sc-mode-btn\" id=\"scModeBtn\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n    <span id=\"scModeLabel\">Keyword</span>\n    <svg class=\"sc-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n  <ul class=\"sc-mode-menu\" id=\"scModeMenu\" role=\"listbox\">\n    <li class=\"sc-mode-item is-active\" data-value=\"keyword\" role=\"option\" aria-selected=\"true\">Keyword</li>\n    <li class=\"sc-mode-item\" data-value=\"semantic\" role=\"option\" aria-selected=\"false\">Semantic</li>\n    <li class=\"sc-mode-item\" data-value=\"people\" role=\"option\" aria-selected=\"false\">People</li>\n  </ul>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<script>\n(function(){\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:44:50','2026-05-27 16:44:50','',523,'https://m5wp.momentry.ddns.net/?p=1749',0,'revision','',0),
(1750,6,'2026-05-27 16:58:29','2026-05-27 16:58:29','<!-- wp:html -->\n<script data-wp-block-html=\"js\">\n<script>\n(function(){\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n})();\n</script>\n</script>\n\n<!-- ============================================================\n     Momentry Studio Playground Main Content\n     Full version - with localStorage search history + Search Lab\n     + Bookmark highlight (yellow) + scroll-to-bookmark\n     ============================================================ -->\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}\n.sc-mode-wrap { position: relative; display: inline-block; margin-left: 8px; }\n.sc-mode-btn {\n  display:flex; align-items:center; gap:4px;\n  padding:4px 10px; border-radius:999px; border:none;\n  background:#f3f3f3; cursor:pointer; font-size:13px;\n}\n.sc-mode-btn:hover { background:#e5e5e5; }\n.sc-mode-menu {\n  position:absolute; top:calc(100% + 6px); right:0;\n  list-style:none; margin:0; padding:6px 0;\n  background:#fff; border:1px solid #ddd; border-radius:12px;\n  box-shadow:0 4px 12px rgba(0,0,0,.1);\n  display:none;\n}\n.sc-mode-menu.is-open { display:block; }\n.sc-mode-item {\n  padding:6px 12px; cursor:pointer; display:flex; align-items:center;\n}\n.sc-mode-item:hover { background:#f5f5f5; }\n.sc-mode-item.is-active { background:#e0e0e0; font-weight:600; }\n\n</style>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\"><div class=\"sc-mode-wrap\" id=\"scModeWrap\">\n  <button class=\"sc-mode-btn\" id=\"scModeBtn\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n    <span id=\"scModeLabel\">Keyword</span>\n    <svg class=\"sc-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n  <ul class=\"sc-mode-menu\" id=\"scModeMenu\" role=\"listbox\">\n    <li class=\"sc-mode-item is-active\" data-value=\"keyword\" role=\"option\" aria-selected=\"true\">Keyword</li>\n    <li class=\"sc-mode-item\" data-value=\"semantic\" role=\"option\" aria-selected=\"false\">Semantic</li>\n    <li class=\"sc-mode-item\" data-value=\"people\" role=\"option\" aria-selected=\"false\">People</li>\n  </ul>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n\n<script>\n(function(){\n\'use strict\';\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_ENDPOINT = \'https://accusys1.app.n8n.cloud/webhook/search\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\nfunction buildThumbUrl(videoId, tStart){\n  if(!videoId) return \'\';\n  return THUMB_BASE + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId) + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n}\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\n\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || \'\'; var videoId = moment.video_id || \'\';\n  var clip = normalizeClipTimes(moment.t_start, moment.t_end);\n  var tStart = clip.start, tEnd = clip.end; var query = LAST_QUERY || \'\';\n  var detailParams = {q:query, query:query, restore:1, moment_id:momentId, video_id:videoId, t_start:tStart, t_end:tEnd, title:moment.title||\'\', snippet:moment.snippet||\'\', video_url:moment.video_url||\'\'};\n  return { id:momentId, momentId:momentId, videoId:videoId, type:\'video\', title:moment.title || \'Untitled\', name:moment.title || \'Untitled\', snippet:moment.snippet || \'\', desc:moment.snippet || \'\', url:moment.video_url || \'\', videoUrl:moment.video_url || \'\', thumbnailUrl: buildThumbUrl(videoId, tStart), tStart:tStart, tEnd:tEnd, score:typeof moment.score === \'number\' ? moment.score : null, date:moment.created_at ? formatDate(moment.created_at) : \'\', path:moment.source_path || \'\', duration:moment.duration ? formatDuration(moment.duration) : \'\', size:\'\', pageUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams), detailUrl:buildQueryUrl(DETAIL_VIEW_URL, detailParams) };\n}\nfunction mapResultsToCards(results){ return (results||[]).map(function(moment){ return mapMomentToCard(moment); }); }\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var payload = {\n    query: query,\n    video_uuid: \'384b0ff44aaaa1f1\',\n    limit: 3000\n  };\n  return fetch(SEARCH_ENDPOINT, {\n    method: \'POST\',\n    headers: { \'Content-Type\': \'application/json\' },\n    body: JSON.stringify(payload)\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n  if(c.type===\'video\'){\n    var video=document.getElementById(\'mmVideo\');\n    video.addEventListener(\'loadedmetadata\',function(){ try{ video.currentTime=startAt; }catch(err){} },{once:true});\n    video.addEventListener(\'seeked\',function handleSeeked(){ video.removeEventListener(\'seeked\',handleSeeked); video.play().catch(function(err){ console.warn(\'video play failed:\',err); }); });\n    video.addEventListener(\'timeupdate\',function(){ if(endAt>startAt&&video.currentTime>=endAt){ video.pause(); try{ video.currentTime=endAt; }catch(err){} } });\n  }\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n</script>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-27 16:58:29','2026-05-27 16:58:29','',523,'https://m5wp.momentry.ddns.net/?p=1750',0,'revision','',0),
(1751,1,'2026-05-28 01:43:32','2026-05-28 01:43:32','<!-- wp:html -->\n<!-- Momentry Studio Responsive Portal -->\n<div id=\"momentry-app\">\n  <div class=\"ms-shell\">\n\n    <header class=\"ms-hero\">\n      <h1 class=\"ms-title\">Momentry Studio</h1>\n      <p class=\"ms-subtitle\">Turn Every Moment Into Intelligence</p>\n    </header>\n\n    <!-- Search Bar -->\n    <section class=\"ms-search\" aria-label=\"Search\">\n      <div class=\"ms-searchbar\" role=\"search\">\n\n        <button id=\"msSearchBtn\" class=\"ms-iconbtn ms-left\" type=\"button\" aria-label=\"Search\" title=\"Search\" disabled=\"\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M10.5 18.5a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M16.5 16.5 21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <input id=\"msInput\" class=\"ms-input\" type=\"text\" inputmode=\"search\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"搜尋照片或影片關鍵字…\" aria-label=\"Search input\">\n\n        <!-- Mode Selector -->\n        <div class=\"ms-mode-wrap\" id=\"msModeWrap\">\n          <button class=\"ms-mode-btn\" id=\"msModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n            <span class=\"ms-mode-label\" id=\"msModeLabelText\">Keyword</span>\n            <svg class=\"ms-mode-chevron\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M2.5 4.5 6 8l3.5-3.5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <ul class=\"ms-mode-menu\" id=\"msModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\n            <li class=\"ms-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Keyword\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              Semantic\n            </li>\n            <li class=\"ms-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\n              <span class=\"ms-mode-item-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n                  <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n                </svg>\n              </span>\n              People\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"ms-divider\" aria-hidden=\"true\"></div>\n\n        <button class=\"ms-iconbtn ms-right\" id=\"msMicBtn\" type=\"button\" aria-label=\"Voice input\" title=\"Voice input\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n            <path d=\"M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3Z\" stroke=\"currentColor\" stroke-width=\"1.8\"></path>\n            <path d=\"M6 11a6 6 0 0 0 12 0\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M12 17v4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n            <path d=\"M9 21h6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </div>\n    </section>\n\n    <!-- Cards -->\n    <section class=\"ms-cards\">\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最近瀏覽</div>\n        <div class=\"ms-thumbrow\" id=\"msRecentRow\"></div>\n      </article>\n\n      <article class=\"ms-card\">\n        <div class=\"ms-cardlabel\">最新加入</div>\n        <div class=\"ms-thumbrow\" id=\"msLatestRow\"></div>\n      </article>\n    </section>\n\n  </div>\n</div>\n\n<style>\n  #momentry-app{\n    width:100%;\n    max-width:100%;\n    min-width:0;\n    background:#ffffff !important;\n    padding:40px 48px;\n    box-sizing:border-box;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n    overflow:hidden;\n    border-radius:22px;\n  }\n\n  #momentry-app .ms-shell{\n    width:100%;\n    max-width:1000px;\n    min-width:0;\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:30px;\n    background:#ffffff;\n  }\n\n  #momentry-app .ms-hero{\n    text-align:center;\n    margin-top:10vh;\n  }\n\n  #momentry-app .ms-title{\n    display:block !important;\n    font-size:44px;\n    font-weight:700;\n    color:#111 !important;\n    text-align:center;\n    margin:0 0 8px 0;\n    line-height:1.15;\n  }\n\n  #momentry-app .ms-subtitle{\n    color:#6e6e6e;\n    font-size:18px;\n    margin:0;\n  }\n\n  /* --- Search --- */\n  #momentry-app .ms-search{\n    width:100%;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    gap:10px;\n    margin-bottom:30px;\n  }\n\n  #momentry-app .ms-searchbar{\n    width:100%;\n    max-width:750px;\n    min-width:0;\n    height:62px;\n    background:#fff;\n    border-radius:999px;\n    display:flex;\n    align-items:center;\n    gap:10px;\n    padding:0 14px;\n    box-sizing:border-box;\n    box-shadow:0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);\n    border:1px solid rgba(0,0,0,.06);\n  }\n\n  #momentry-app .ms-iconbtn{\n    width:44px;\n    height:44px;\n    border-radius:999px;\n    border:0;\n    background:transparent;\n    display:grid;\n    place-items:center;\n    color:rgba(0,0,0,.55);\n    cursor:pointer;\n    transition:background .15s ease, color .15s ease, transform .05s ease;\n    flex:0 0 auto;\n    box-shadow:none;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-iconbtn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.7);\n  }\n\n  #momentry-app .ms-iconbtn:active{\n    transform:scale(.98);\n  }\n\n  #momentry-app #msSearchBtn:disabled{\n    cursor:default;\n    opacity:1;\n  }\n\n  #momentry-app #msSearchBtn:disabled:hover{\n    background:transparent;\n    color:rgba(0,0,0,.55);\n    transform:none;\n  }\n\n  #momentry-app .ms-divider{\n    width:1px;\n    height:28px;\n    background:rgba(0,0,0,.10);\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-input{\n    flex:1;\n    min-width:0;\n    height:44px;\n    border:0;\n    outline:none;\n    font-size:18px;\n    color:#202124;\n    background:transparent;\n  }\n\n  #momentry-app .ms-input::placeholder{\n    color:rgba(0,0,0,.45);\n  }\n\n  /* ── Mode Selector ── */\n  #momentry-app .ms-mode-wrap{\n    position:relative;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn{\n    display:flex;\n    align-items:center;\n    gap:5px;\n    padding:6px 12px 6px 14px;\n    border:0;\n    border-radius:999px;\n    background:transparent;\n    cursor:pointer;\n    color:rgba(0,0,0,.6);\n    font-size:14px;\n    font-weight:500;\n    font-family:inherit;\n    white-space:nowrap;\n    transition:background .15s ease, color .15s ease;\n    outline:none;\n    -webkit-appearance:none;\n    appearance:none;\n  }\n\n  #momentry-app .ms-mode-btn:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.8);\n  }\n\n  #momentry-app .ms-mode-chevron{\n    color:rgba(0,0,0,.4);\n    transition:transform .2s ease;\n    flex:0 0 auto;\n  }\n\n  #momentry-app .ms-mode-btn[aria-expanded=\"true\"] .ms-mode-chevron{\n    transform:rotate(180deg);\n  }\n\n  #momentry-app .ms-mode-menu{\n    position:absolute;\n    top:calc(100% + 10px);\n    right:0;\n    min-width:148px;\n    background:#fff;\n    border-radius:16px;\n    box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);\n    border:1px solid rgba(0,0,0,.07);\n    padding:6px;\n    margin:0;\n    list-style:none;\n    z-index:100;\n    opacity:0;\n    transform:translateY(-6px) scale(.97);\n    pointer-events:none;\n    transition:opacity .18s ease, transform .18s ease;\n  }\n\n  #momentry-app .ms-mode-menu.is-open{\n    opacity:1;\n    transform:translateY(0) scale(1);\n    pointer-events:auto;\n  }\n\n  #momentry-app .ms-mode-item{\n    display:flex;\n    align-items:center;\n    gap:9px;\n    padding:9px 12px;\n    border-radius:10px;\n    font-size:14px;\n    font-weight:450;\n    color:rgba(0,0,0,.65);\n    cursor:pointer;\n    transition:background .12s ease, color .12s ease;\n    user-select:none;\n  }\n\n  #momentry-app .ms-mode-item:hover{\n    background:rgba(0,0,0,.04);\n    color:rgba(0,0,0,.85);\n  }\n\n  #momentry-app .ms-mode-item.is-active{\n    background:rgba(0,0,0,.06);\n    color:#111;\n    font-weight:550;\n  }\n\n  #momentry-app .ms-mode-item-icon{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    width:22px;\n    height:22px;\n    border-radius:6px;\n    background:rgba(0,0,0,.05);\n    flex:0 0 auto;\n    color:rgba(0,0,0,.5);\n  }\n\n  #momentry-app .ms-mode-item.is-active .ms-mode-item-icon{\n    background:rgba(0,0,0,.08);\n    color:#111;\n  }\n\n  /* --- Cards --- */\n  #momentry-app .ms-cards{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px;\n    width:100%;\n    max-width:790px;\n    min-width:0;\n    margin:0 auto;\n  }\n\n  #momentry-app .ms-card{\n    border-radius:18px;\n    background:#f8f8f8;\n    padding:12px;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:110px;\n    justify-content:flex-start;\n    min-width:0;\n    overflow:hidden;\n  }\n\n  #momentry-app .ms-cardlabel{\n    font-size:15px;\n    font-weight:750;\n    color:#666;\n    flex:0 0 auto;\n    white-space:nowrap;\n  }\n\n  #momentry-app .ms-thumbrow{\n    display:flex;\n    gap:10px;\n    flex:1;\n    min-width:0;\n    overflow:visible;\n    flex-wrap:nowrap;\n  }\n\n  #momentry-app .ms-thumb{\n    width:62px;\n    height:62px;\n    min-width:62px;\n    border-radius:10px;\n    overflow:hidden;\n    cursor:pointer;\n    border:1px solid #eee;\n    flex:0 0 auto;\n    background:#fff;\n    transition:transform .15s ease, box-shadow .15s ease;\n  }\n\n  #momentry-app .ms-thumb:hover{\n    transform:translateY(-2px);\n    box-shadow:0 4px 12px rgba(0,0,0,.12);\n  }\n\n  #momentry-app .ms-thumb img{\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n\n  #momentry-app .ms-thumb.is-empty{\n    background:#e8e8e8;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-empty:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  #momentry-app .ms-thumb.is-pending{\n    background:#f0f0f0;\n    border:1px dashed #ccc;\n    cursor:default;\n  }\n\n  #momentry-app .ms-thumb.is-pending:hover{\n    transform:none;\n    box-shadow:none;\n  }\n\n  @media (max-width:900px){\n    #momentry-app{\n      padding:28px 20px;\n    }\n\n    #momentry-app .ms-cards{\n      grid-template-columns:1fr;\n    }\n\n    #momentry-app .ms-title{\n      font-size:32px;\n    }\n\n    #momentry-app .ms-subtitle{\n      font-size:16px;\n    }\n  }\n/* 隐藏首页底下：最近浏览 / 最新加入 */\n#momentry-app .ms-cards{\n  display:none !important;\n}\n</style>\n\n<script>\n(function(){\n\n  var THUMB_BASE    = \'https://wp.momentry.ddns.net/\';\n  var SEARCH_PAGE   = \'/search-chat/\';\n  var DETAIL_PAGE   = \'https://wp.momentry.ddns.net/ww-10/\';\n\n  var recentRow = document.getElementById(\'msRecentRow\');\n  var latestRow = document.getElementById(\'msLatestRow\');\n  var input     = document.getElementById(\'msInput\');\n  var searchBtn = document.getElementById(\'msSearchBtn\');\n\n  if (!recentRow || !latestRow) return;\n\n  /* ── Mode Selector ── */\n var SEARCH_MODE_KEY = \'momentry_home_search_mode_v1\';\n\nvar currentMode = (\n  localStorage.getItem(SEARCH_MODE_KEY) ||\n  \'keyword\'\n).toLowerCase();\n  var modeBtn      = document.getElementById(\'msModeBtn\');\n  var modeMenu     = document.getElementById(\'msModeMenu\');\n  var modeLabelTxt = document.getElementById(\'msModeLabelText\');\n  var modeItems    = modeMenu ? modeMenu.querySelectorAll(\'.ms-mode-item\') : [];\n\n  function openMenu() {\n    modeMenu.classList.add(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'true\');\n  }\n\n  function closeMenu() {\n    modeMenu.classList.remove(\'is-open\');\n    modeBtn.setAttribute(\'aria-expanded\', \'false\');\n  }\n\n  function toggleMenu() {\n    modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu();\n  }\n\n  function setMode(value, label) {\n  currentMode = value;\n\n  try{\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n  }catch(e){}\n    modeLabelTxt.textContent = label;\n    modeItems.forEach(function(item) {\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active ? \'true\' : \'false\');\n    });\n    closeMenu();\n  }\n\n  if (modeBtn) {\n    modeBtn.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      toggleMenu();\n    });\n  }\n\n  modeItems.forEach(function(item) {\n    item.addEventListener(\'click\', function(e) {\n      e.stopPropagation();\n      setMode(item.dataset.value, item.textContent.trim());\n    });\n  });\n\n  document.addEventListener(\'click\', function(e) {\n    var wrap = document.getElementById(\'msModeWrap\');\n    if (wrap && !wrap.contains(e.target)) closeMenu();\n  });\n\n  document.addEventListener(\'keydown\', function(e) {\n    if (e.key === \'Escape\') closeMenu();\n  });\n/* ── 初始化模式 ── */\n(function initSavedMode(){\n\n  var found = false;\n\n  modeItems.forEach(function(item){\n\n    if(item.dataset.value === currentMode){\n\n      found = true;\n\n      setMode(\n        item.dataset.value,\n        item.textContent.trim()\n      );\n    }\n  });\n\n  if(!found){\n    setMode(\'keyword\', \'Keyword\');\n  }\n\n})();\n\n  /* ── 工具函式 ── */\n  function buildThumbUrl(videoId, tStart) {\n    if (!videoId) return \'\';\n    return THUMB_BASE\n      + \'?momentry_thumb=1&uuid=\' + encodeURIComponent(videoId)\n      + \'&t=\' + encodeURIComponent(Number(tStart || 0));\n  }\n\n  function getRecentViewed() {\n    try {\n      var raw = localStorage.getItem(\'ms_recent_viewed_v2\');\n      var list = JSON.parse(raw || \'[]\');\n      return Array.isArray(list) ? list : [];\n    } catch(e) {\n      return [];\n    }\n  }\n\n  /* ── 搜尋邏輯 ── */\n  function goSearch() {\n    var keyword = input ? input.value.trim() : \'\';\n    if (keyword) {\n      window.location.href = SEARCH_PAGE\n        + \'?q=\' + encodeURIComponent(keyword)\n        + \'&mode=\' + encodeURIComponent(currentMode);\n    }\n  }\n\n  function updateSearchBtnState() {\n    if (!input || !searchBtn) return;\n    searchBtn.disabled = input.value.trim() === \'\';\n  }\n\n  if (searchBtn) {\n    searchBtn.addEventListener(\'click\', function() {\n      if (!searchBtn.disabled) goSearch();\n    });\n  }\n\n  if (input) {\n    var isComposing = false;\n\n    input.addEventListener(\'compositionstart\', function() { isComposing = true; });\n    input.addEventListener(\'compositionend\',   function() { isComposing = false; });\n    input.addEventListener(\'input\', updateSearchBtnState);\n    input.addEventListener(\'keydown\', function(e) {\n      if (isComposing) return;\n      if (e.key === \'Enter\') {\n        e.preventDefault();\n        goSearch();\n      }\n    });\n  }\n\n  updateSearchBtnState();\n\n  /* ── 縮圖元件 ── */\n  function makeThumb(src, title, onClick) {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb\';\n    div.title = title || \'\';\n\n    var img = document.createElement(\'img\');\n    img.alt = title || \'\';\n    img.src = src;\n\n    img.onerror = function() {\n      img.style.display = \'none\';\n      div.style.background = \'#ddd\';\n    };\n\n    div.appendChild(img);\n\n    if (typeof onClick === \'function\') {\n      div.addEventListener(\'click\', onClick);\n    }\n\n    return div;\n  }\n\n  function makeEmpty() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-empty\';\n    return div;\n  }\n\n  function makePending() {\n    var div = document.createElement(\'div\');\n    div.className = \'ms-thumb is-pending\';\n    return div;\n  }\n\n  /* ── 最近瀏覽 ── */\n  function renderRecent() {\n    recentRow.innerHTML = \'\';\n\n    var list = getRecentViewed().slice(0, 4);\n\n    list.forEach(function(item) {\n      var src = item.thumbnailUrl\n             || buildThumbUrl(item.video_id, item.t_start)\n             || \'\';\n\n      var el = makeThumb(src, item.title || \'\', function() {\n        var p = new URLSearchParams();\n        p.set(\'moment_id\', item.moment_id || \'\');\n        p.set(\'video_id\',  item.video_id  || \'\');\n        p.set(\'t_start\',   String(Number(item.t_start || 0)));\n        p.set(\'t_end\',     String(Number(item.t_end   || 0)));\n        p.set(\'title\',     item.title   || \'\');\n        p.set(\'snippet\',   item.snippet || \'\');\n        p.set(\'video_url\', item.url     || \'\');\n        p.set(\'q\',         item.title   || \'\');\n        window.location.href = DETAIL_PAGE + \'?\' + p.toString();\n      });\n\n      recentRow.appendChild(el);\n    });\n\n    while (recentRow.children.length < 4) {\n      recentRow.appendChild(makeEmpty());\n    }\n  }\n\n  /* ── 最新加入（待 API）── */\n  function renderLatest() {\n    latestRow.innerHTML = \'\';\n    while (latestRow.children.length < 4) {\n      latestRow.appendChild(makePending());\n    }\n  }\n\n  /* ── 執行 ── */\n  renderRecent();\n  renderLatest();\n\n  window.addEventListener(\'focus\', function() {\n    renderRecent();\n  });\n\n})();\n</script>\n<!-- /wp:html -->','Home','','inherit','closed','closed','','341-revision-v1','','','2026-05-28 01:43:32','2026-05-28 01:43:32','',341,'https://m5wp.momentry.ddns.net/?p=1751',0,'revision','',0),
(1752,6,'2026-05-28 01:48:49','2026-05-28 01:48:49','<!-- wp:html -->\n<script data-wp-block-html=\"js\">\n<script>\n(function(){\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n})();\n</script>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Search Lab 畫面 -->\n<div id=\"ms-view-searchlab\">\n  <div class=\"ms-search-lab-header\">\n    <h1>🔬 Search Lab <span class=\"ms-lab-badge\">Mock Data</span></h1>\n    <p>Evaluation Entry — 搜尋品質量測系統入口。目前使用假數據，W3 串接真實 API 後自動更新。</p>\n  </div>\n  <div class=\"ms-lab-grid\">\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 A — Evaluation Trigger</div>\n      <div class=\"ms-lab-trigger-wrap\">\n        <button id=\"msRunEvalBtn\">\n          <div class=\"ms-lab-spinner\" id=\"msEvalSpinner\"></div>\n          <span class=\"ms-btn-label\">▶ Run Evaluation</span>\n        </button>\n        <span class=\"ms-lab-trigger-note\">觸發後模擬執行 2 秒，目前不串接 backend。</span>\n      </div>\n      <div class=\"ms-eval-toast\" id=\"msEvalToast\">✓ Evaluation completed — metrics updated.</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 B — Search Quality Metrics</div>\n      <div class=\"ms-metrics-grid\">\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Hit @ 3</div>\n          <div class=\"ms-metric-value good\">72%</div>\n          <div class=\"ms-metric-desc\">前3名命中率</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">MRR</div>\n          <div class=\"ms-metric-value good\">0.58</div>\n          <div class=\"ms-metric-desc\">Mean Reciprocal Rank</div>\n        </div>\n        <div class=\"ms-metric-item\">\n          <div class=\"ms-metric-label\">Time Error</div>\n          <div class=\"ms-metric-value warn\">2.1s</div>\n          <div class=\"ms-metric-desc\">時間戳誤差（秒）</div>\n        </div>\n      </div>\n      <div class=\"ms-metrics-note\">ℹ️ 目前為 mock data，尚未串接 backend evaluation API。</div>\n    </div>\n    <div class=\"ms-lab-card\">\n      <div class=\"ms-lab-card-title\">區塊 C — Last Evaluation</div>\n      <div class=\"ms-last-eval\">\n        <div class=\"ms-last-eval-icon\">🕐</div>\n        <div class=\"ms-last-eval-info\">\n          <div class=\"ms-last-eval-time\" id=\"msLastRunTime\">2026-03-28 14:20</div>\n          <div class=\"ms-last-eval-meta\">25 queries · dataset v1 · Hit@3 / MRR / Time Error</div>\n        </div>\n        <div class=\"ms-last-eval-status\">✓ Completed</div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"msSelBKPop\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg>加入書籤</div>\n<div id=\"msHO\"><div id=\"msHOB\"><div class=\"hir\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg><input class=\"hii\" id=\"msHI\" placeholder=\"搜尋對話紀錄\"></div><div class=\"hires\" id=\"msHR\"></div></div></div>\n<div id=\"msCM\"><div class=\"ci\" data-a=\"pin\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"></path></svg>釘選</div><div class=\"ci\" data-a=\"rename\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>重新命名</div><div class=\"cdv\"></div><div class=\"ci dng\" data-a=\"delete\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"></path><path d=\"M10 11v6M14 11v6\"></path><path d=\"M9 6V4h6v2\"></path></svg>刪除</div></div>\n<div id=\"msMM\"><div class=\"mmbox\"><div class=\"mmed\" id=\"mmMA\"></div><div class=\"mminf\" id=\"mmIA\"></div></div></div>\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-28 01:48:49','2026-05-28 01:48:49','',523,'https://m5wp.momentry.ddns.net/?p=1752',0,'revision','',0),
(1753,6,'2026-05-28 01:50:24','2026-05-28 01:50:24','<!-- wp:html -->\n<script data-wp-block-html=\"js\">\n<script>\n(function(){\n  var modeBtn = document.getElementById(\'scModeBtn\');\n  var modeMenu = document.getElementById(\'scModeMenu\');\n  var modeLabel = document.getElementById(\'scModeLabel\');\n  var modeItems = modeMenu.querySelectorAll(\'.sc-mode-item\');\n  var SEARCH_MODE_KEY = \'sc_search_mode_v1\';\n  var currentMode = localStorage.getItem(SEARCH_MODE_KEY) || \'keyword\';\n\n  function openMenu(){ modeMenu.classList.add(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'true\'); }\n  function closeMenu(){ modeMenu.classList.remove(\'is-open\'); modeBtn.setAttribute(\'aria-expanded\',\'false\'); }\n  function toggleMenu(){ modeMenu.classList.contains(\'is-open\') ? closeMenu() : openMenu(); }\n  function setMode(value, label){\n    currentMode = value;\n    localStorage.setItem(SEARCH_MODE_KEY, value);\n    modeLabel.textContent = label;\n    modeItems.forEach(function(item){\n      var active = item.dataset.value === value;\n      item.classList.toggle(\'is-active\', active);\n      item.setAttribute(\'aria-selected\', active?\'true\':\'false\');\n    });\n    closeMenu();\n  }\n\n  modeBtn.addEventListener(\'click\', function(e){ e.stopPropagation(); toggleMenu(); });\n  modeItems.forEach(function(item){\n    item.addEventListener(\'click\', function(e){ e.stopPropagation(); setMode(item.dataset.value, item.textContent.trim()); });\n  });\n  document.addEventListener(\'click\', function(e){ if(!document.getElementById(\'scModeWrap\').contains(e.target)) closeMenu(); });\n  document.addEventListener(\'keydown\', function(e){ if(e.key===\'Escape\') closeMenu(); });\n\n})();\n</script>\n\n<!-- 搜尋主畫面 -->\n<div id=\"ms-view-search\">\n  <div id=\"msP\">\n    <div class=\"topbar\">\n      <div class=\"tbacts\">\n        <button class=\"icobtn\" id=\"msBKBtn\" title=\"書籤\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"></path></svg></button>\n        <button class=\"icobtn\" id=\"msHSBtn\" title=\"搜尋對話紀錄\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg></button>\n      </div>\n      <div id=\"msBK\"><div class=\"bkh\"><span class=\"bkht\">書籤</span><button class=\"bkx\" id=\"msBKX\">✕</button></div><div id=\"msBKL\"></div></div>\n    </div>\n    <div class=\"chat\" id=\"msChat\"></div>\n    <div class=\"ibar\">\n      <div class=\"iwrap\">\n        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        <input class=\"ifield\" id=\"msInp\" placeholder=\"搜尋照片或影片關鍵字…\" autocomplete=\"off\">\n<div class=\"ms-chat-mode-wrap\" id=\"msChatModeWrap\">\n  <button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\">\n    <span id=\"msChatModeLabel\">Keyword</span>\n    <span class=\"ms-chat-mode-arrow\">⌄</span>\n  </button>\n\n  <div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\">\n  <div class=\"ms-chat-mode-item is-active\" data-value=\"keyword\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Keyword</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"semantic\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>Semantic</span>\n  </div>\n\n  <div class=\"ms-chat-mode-item\" data-value=\"people\">\n    <span class=\"ms-chat-mode-item-icon\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </span>\n    <span>People</span>\n  </div>\n</div>\n</div>\n        <button class=\"micbtn\" title=\"語音輸入\"><svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"></path><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"></path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"></line><line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"></line></svg></button>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<!-- /wp:html -->','search-chat','','inherit','closed','closed','','523-revision-v1','','','2026-05-28 01:50:24','2026-05-28 01:50:24','',523,'https://m5wp.momentry.ddns.net/?p=1753',0,'revision','',0),
(1754,1,'2026-05-28 10:30:29','0000-00-00 00:00:00','','Auto Draft','','auto-draft','open','open','','','','','2026-05-28 10:30:29','0000-00-00 00:00:00','',0,'https://m5wp.momentry.ddns.net/?p=1754',0,'post','',0),
(1755,4,'2026-05-28 13:28:34','2026-05-28 13:28:34','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; cursor: pointer; position: relative; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-ppl-media-badge-conf { position: absolute; bottom: 5px; left: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #9aa0a6; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n.ms-silhouette { width: 100%; height: 100%; }\n.ms-media-timeline-wrap { display: none !important; }\n.ms-thumb-bg { position: absolute; inset: 0; background: #d0d0d0; border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }\n.ms-ppl-media-badge { display: none; }\n.ms-thumb-play-hint { display: none; }\n\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }\n.ms-ppl-section-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; font-weight: 500; color: #9aa0a6; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; }\n.ms-ppl-section-toggle-btn::before { content: \'\'; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"] { border-color: #202124; color: #202124; background: #fff; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before { background: #202124; }\n.ms-ppl-section-toggle-btn:hover { border-color: #5f6368; color: #5f6368; }\n</style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \'use strict\';\n\n  // ── 設定 ──────────────────────────────────────────────────────\n  var API_BASE   = window.MS_API_BASE;   // GET 類暫時保留直打\n  var API_KEY    = window.MS_API_KEY;    // GET 類暫時保留\n  var PROXY_BASE = \'/wp-json/momentry/v1/proxy\'; // ✅ 寫入類走 PHP proxy\n  var PAGE_SIZE  = 30;\n\n  var wpRestNonce = (window.wpRestNonce || \'\');\n\n  // ── SVG 常數 ──────────────────────────────────────────────────\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  if (window.location.pathname.indexOf(\'people\') === -1) return;\n\n  // ── API helpers ───────────────────────────────────────────────\n\n  // GET：暫時還是直打後端\n  function apiFetch(path) {\n    var startedAt = Date.now();\n    return fetch(API_BASE + path, {\n      headers: { \'X-API-Key\': API_KEY }\n    }).then(function (r) {\n      var status = r.status;\n      return r.text().then(function (text) {\n        var data = null;\n        try { data = JSON.parse(text); } catch (e) { data = text; }\n        fetch(window.location.origin + \'/wp-json/momentry/v1/people-log\', {\n          method: \'POST\',\n          credentials: \'same-origin\',\n          headers: { \'Content-Type\': \'application/json\', \'X-WP-Nonce\': wpRestNonce },\n          body: JSON.stringify({\n            method: \'GET\', path: \'People frontend apiFetch → \' + path,\n            request_body: { path: path }, response_body: data,\n            http_code: status, latency_ms: Date.now() - startedAt,\n            success: r.ok, error_message: r.ok ? \'\' : String(status)\n          })\n        }).catch(function () {});\n        if (!r.ok) return Promise.reject(status);\n        return data;\n      });\n    });\n  }\n\n  // ✅ PATCH：走 PHP proxy\n  function apiPatch(path, body) {\n    return fetch(PROXY_BASE + path, {\n      method: \'PATCH\',\n      credentials: \'same-origin\',\n      headers: {\n        \'Content-Type\': \'application/json\',\n        \'X-WP-Nonce\': wpRestNonce\n      },\n      body: JSON.stringify(body),\n    }).then(function (r) {\n      if (!r.ok) return Promise.reject(r.status);\n      return r.status === 204 ? {} : r.json().catch(function () { return {}; });\n    });\n  }\n\n  // ✅ POST：走 PHP proxy\n  function apiPost(path, body) {\n    return fetch(PROXY_BASE + path, {\n      method: \'POST\',\n      credentials: \'same-origin\',\n      headers: {\n        \'Content-Type\': \'application/json\',\n        \'X-WP-Nonce\': wpRestNonce\n      },\n      body: JSON.stringify(body),\n    }).then(function (r) {\n      return r.ok ? r.json() : Promise.reject(r.status);\n    });\n  }\n\n  // ✅ DELETE：走 PHP proxy\n  function apiDelete(path) {\n    return fetch(PROXY_BASE + path, {\n      method: \'DELETE\',\n      credentials: \'same-origin\',\n      headers: { \'X-WP-Nonce\': wpRestNonce },\n    }).then(function (r) {\n      return r.ok ? (r.status === 204 ? {} : r.json()) : Promise.reject(r.status);\n    });\n  }\n\n  function buildMetadataPatch(person) {\n    return {\n      role:           person.role    || \'\',\n      notes:          person.notes   || \'\',\n      aliases:        person.aliases || [],\n      starred:        !!person.isStarred,\n      user_confirmed: !!person.userConfirmed,\n      user_skipped:   !!person.userSkipped,\n    };\n  }\n\n  function toggleStarAndSave(person) {\n    if (!person) return;\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n    renderGrid();\n    apiPatch(\'/identity/\' + person.id, {\n      metadata: buildMetadataPatch(person),\n    }).then(function () {\n    }).catch(function (e) {\n      person.isStarred = !person.isStarred;\n      console.warn(\'ms-people: PATCH starred 失敗\', e);\n      syncDetailStarBtns(person);\n      renderGrid();\n    });\n  }\n\n  function throttledPool(factories, limit) {\n    return new Promise(function (resolve) {\n      var results = [], idx = 0, running = 0, total = factories.length;\n      if (!total) { resolve(results); return; }\n      function next() {\n        while (running < limit && idx < total) {\n          (function (i) {\n            running++;\n            factories[i]().catch(function () { return null; }).then(function (val) {\n              results[i] = val; running--;\n              if (idx >= total && running === 0) resolve(results); else next();\n            });\n          })(idx++);\n        }\n      }\n      next();\n    });\n  }\n\n  function clearPersonCache(person) {\n    if (!person) return;\n    (person.face_members || []).forEach(function (fm) {\n      if (fm.thumb && fm.thumb.startsWith(\'blob:\')) { URL.revokeObjectURL(fm.thumb); fm.thumb = null; }\n    });\n    if (person.thumb && person.thumb.startsWith(\'blob:\')) { URL.revokeObjectURL(person.thumb); person.thumb = null; }\n    delete _detailCache[person.id];\n  }\n\n  var SS_KEY = \'ms_ppl_draft\';\n  function saveDraft(person) {\n    if (!person) return;\n    try { sessionStorage.setItem(SS_KEY, JSON.stringify({ id: person.id, name: getVal(\'msPplEditName\') || person.name, role: getVal(\'msPplEditRole\'), notes: getVal(\'msPplEditNotes\'), aliases: state.currentAliases.slice(), isStarred: !!person.isStarred })); } catch (e) {}\n  }\n  function loadDraft() { try { var r = sessionStorage.getItem(SS_KEY); return r ? JSON.parse(r) : null; } catch (e) { return null; } }\n  function clearDraft() { try { sessionStorage.removeItem(SS_KEY); } catch (e) {} }\n  function applyDraftIfMatch(person) {\n    var draft = loadDraft();\n    if (!draft || draft.id !== person.id) return false;\n    person.name = draft.name || person.name; person.role = draft.role; person.notes = draft.notes;\n    person.aliases = Array.isArray(draft.aliases) ? draft.aliases : [];\n    if (draft.isStarred !== undefined) person.isStarred = draft.isStarred;\n    return true;\n  }\n\n  var knownPeople   = [];\n  var pendingPeople = [];\n  var skippedPeople = [];\n  window._msPpl = { knownPeople: knownPeople, pendingPeople: pendingPeople, skippedPeople: skippedPeople };\n\n  var _unnamedCount = 0;\n  var _detailCache  = {};\n  var knownPage     = 1;\n  var pendingPage   = 1;\n\n  var state = {\n    showStarred: false, searchQuery: \'\', sortMode: \'name\',\n    currentPerson: null, editMode: false, currentAliases: [],\n    ctxFmId: null, mergeSource: null, mergeTarget: null,\n    mergeFromDetail: false, ctxCardPerson: null, isDirty: false,\n    promoteMode: false,\n  };\n  window._msState = state;\n\n  window.MS_PPL_IS_DIRTY = function () { return state.isDirty; };\n  window.MS_PPL_SHOW_DIRTY_LEAVE = function (onLeave) {\n    showDirtyLeaveModal(\n      function () {\n        var p = state.currentPerson; if (!p) { onLeave(); return; }\n        p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n        saveDraft(p);\n        apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) })\n          .then(function () { clearDraft(); }).catch(function (e) { console.warn(\'ms-people: PATCH 失敗\', e); });\n        state.isDirty = false; hideModal(\'msPplDirtyLeaveModal\'); onLeave();\n      },\n      function () { state.isDirty = false; clearDraft(); hideModal(\'msPplDirtyLeaveModal\'); onLeave(); }\n    );\n  };\n\n  function buildPerson(item) {\n    var starred       = !!(item.metadata && item.metadata.starred);\n    var userConfirmed = !!(item.metadata && item.metadata.user_confirmed);\n    var userSkipped   = !!(item.metadata && item.metadata.user_skipped);\n    return {\n      id: item.identity_uuid, name: item.name || \'\',\n      thumb: null, isNew: false,\n      isStarred: starred, userConfirmed: userConfirmed, userSkipped: userSkipped,\n      aliases: item.metadata && Array.isArray(item.metadata.aliases) ? item.metadata.aliases.map(function (a) {\n        if (typeof a === \'string\') return { locale: \'zh-TW\', name: a };\n        return { locale: a.locale || \'zh-TW\', name: a.name || a.value || \'\' };\n      }).filter(function (a) { return a.name; }) : [],\n      role:  item.metadata && item.metadata.role  ? item.metadata.role  : \'\',\n      notes: item.metadata && item.metadata.notes ? item.metadata.notes : \'\',\n      status: item.status || \'pending\',\n      addedAt: item.created_at ? new Date(item.created_at) : new Date(),\n      lastViewed: null, face_members: [], media: [],\n      _apiId: item.id, _isSystem: !item.name || item.name.indexOf(\'PERSON_\') === 0 || item.name.toLowerCase().indexOf(\'stranger_\') === 0,\n      _metaLoaded: true,\n    };\n  }\n\n  function ingestRaw(rawList) {\n    rawList.forEach(function (item) {\n      var allLists = knownPeople.concat(pendingPeople).concat(skippedPeople);\n      if (allLists.some(function (p) { return p.id === item.identity_uuid; })) return;\n      var person = buildPerson(item);\n      if (person.userConfirmed) { person.status = \'confirmed\'; knownPeople.push(person); }\n      else if (person.userSkipped) { person.status = \'skipped\'; skippedPeople.push(person); }\n      else { person._pendingLabel = \'未命名 #\' + String(++_unnamedCount).padStart(2, \'0\'); pendingPeople.push(person); }\n    });\n  }\n\n  ingestRaw(window.MS_IDENTITIES_PAGE1 || []);\n\n  (function loadRemainingPages() {\n    var total = window.MS_IDENTITIES_PAGES || 1;\n    if (total <= 1) return;\n    var promises = [];\n    for (var p = 2; p <= total; p++) { promises.push(apiFetch(\'/identities?page=\' + p + \'&page_size=50\')); }\n    Promise.all(promises).then(function (results) {\n      results.forEach(function (body) { if (body && Array.isArray(body.identities)) ingestRaw(body.identities); });\n      renderGrid();\n    }).catch(function (e) { console.warn(\'ms-people: 分頁載入失敗\', e); });\n  })();\n\n  function formatSecs(secs) {\n    if (!secs && secs !== 0) return \'\';\n    var s = Math.round(secs), h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;\n    if (h > 0) return h + \':\' + String(m).padStart(2, \'0\') + \':\' + String(sec).padStart(2, \'0\');\n    return m + \':\' + String(sec).padStart(2, \'0\');\n  }\n\n  function cleanFileName(raw) {\n    if (!raw) return \'—\';\n    var parts = raw.split(\'/\');\n    return parts[parts.length - 1].replace(/\\.[^.]+$/, \'\');\n  }\n\n  function makeImg(src) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { if (this.parentNode) this.parentNode.innerHTML = SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) { v.classList.toggle(\'active\', v.id === id); });\n    var isListView = id === \'msPplViewList\';\n    [\'msPplUnboundHr\', \'msPplUnboundTitle\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (elId) {\n      var el = document.getElementById(elId); if (el) el.style.display = isListView ? \'\' : \'none\';\n    });\n    var skippedSec = document.getElementById(\'msPplSkippedSection\');\n    if (skippedSec) {\n      if (!isListView) { skippedSec.style.display = \'none\'; }\n      else { var ts = document.getElementById(\'msPplToggleSkipped\'); skippedSec.style.display = (ts && ts.getAttribute(\'data-active\') === \'true\') ? \'\' : \'none\'; }\n    }\n  }\n\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id) { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\'); if (!menu) return;\n    menu.classList.add(\'show\');\n    menu.style.left = ((x + 150 > window.innerWidth) ? x - 150 : x) + \'px\';\n    menu.style.top  = ((y + 80  > window.innerHeight) ? y - 80  : y) + \'px\';\n  }\n  function hideCtxMenu()        { var m = document.getElementById(\'msPplCtxMenu\');        if (m) m.classList.remove(\'show\'); }\n  function hideCardCtxMenu()    { var m = document.getElementById(\'msPplCardCtxMenu\');    if (m) m.classList.remove(\'show\'); }\n  function hidePendingCtxMenu() { var m = document.getElementById(\'msPplPendingCtxMenu\'); if (m) m.classList.remove(\'show\'); }\n\n  var _dirtyLeaveCallback = null, _dirtyDiscardCallback = null;\n  function showDirtyLeaveModal(onSave, onLeave) { _dirtyLeaveCallback = { onSave: onSave, onLeave: onLeave }; showModal(\'msPplDirtyLeaveModal\'); }\n  function showDirtyDiscardModal(onDiscard) { _dirtyDiscardCallback = onDiscard; showModal(\'msPplDirtyDiscardModal\'); }\n\n  function openVideoPlayer(fileUuid, segments, currentIdx) {\n    var modal = document.getElementById(\'msPplVideoModal\');\n    var videoEl = document.getElementById(\'msPplVideoEl\');\n    var loadingEl = document.getElementById(\'msPplVideoLoading\');\n    var segInfoEl = document.getElementById(\'msPplVideoSegInfo\');\n    if (!modal || !videoEl) return;\n\n    modal._fileUuid = fileUuid; modal._segments = segments; modal._currentIdx = currentIdx;\n\n    function updateDots(activeIdx) {\n      document.querySelectorAll(\'.ms-video-tl-dot\').forEach(function (d, i) { d.classList.toggle(\'active\', i === activeIdx); });\n    }\n\n    function loadSegment(idx) {\n      modal._currentIdx = idx;\n      videoEl.pause(); videoEl.removeAttribute(\'src\'); videoEl.load();\n      videoEl.style.display = \'none\';\n      if (loadingEl) loadingEl.style.display = \'flex\';\n      var prevBtn = document.getElementById(\'msPplVideoPrev\');\n      var nextBtn = document.getElementById(\'msPplVideoNext\');\n      var url = API_BASE + \'/file/\' + fileUuid + \'/video\';\n      if (segments && segments.length) {\n        var seg = segments[idx];\n        url += \'?start_time=\' + seg.start + \'&end_time=\' + seg.end;\n        if (segInfoEl) segInfoEl.textContent = \'片段 \' + (idx + 1) + \' / \' + segments.length + \'　\' + seg.label;\n      } else {\n        if (segInfoEl) segInfoEl.textContent = \'完整影片\';\n      }\n      if (prevBtn) prevBtn.disabled = (!segments || idx <= 0);\n      if (nextBtn) nextBtn.disabled = (!segments || idx >= segments.length - 1);\n      updateDots(idx);\n      fetch(url, { headers: { \'X-API-Key\': API_KEY } })\n        .then(function (r) { if (!r.ok) throw new Error(\'HTTP \' + r.status); return r.blob(); })\n        .then(function (blob) {\n          var blobUrl = URL.createObjectURL(blob);\n          if (modal._blobUrl) URL.revokeObjectURL(modal._blobUrl);\n          modal._blobUrl = blobUrl;\n          videoEl.src = blobUrl;\n          if (loadingEl) loadingEl.style.display = \'none\';\n          videoEl.style.display = \'\';\n          videoEl.play();\n        })\n        .catch(function (e) {\n          if (loadingEl) loadingEl.style.display = \'none\';\n          videoEl.style.display = \'\';\n          if (segInfoEl) segInfoEl.textContent = \'載入失敗：\' + e.message;\n        });\n    }\n\n    var tlWrap = document.getElementById(\'msPplVideoTimeline\');\n    var tlBar  = document.getElementById(\'msPplVideoTlBar\');\n    var tlEnd  = document.getElementById(\'msPplVideoTlEnd\');\n    if (tlBar) tlBar.innerHTML = \'\';\n    if (segments && segments.length && tlWrap && tlBar) {\n      tlWrap.style.display = \'\';\n      var totalDur = segments[segments.length - 1].end;\n      if (tlEnd) tlEnd.textContent = formatSecs(Math.round(totalDur));\n      segments.forEach(function (seg, idx) {\n        var dot = document.createElement(\'div\');\n        dot.className = \'ms-video-tl-dot\' + (idx === currentIdx ? \' active\' : \'\');\n        dot.style.left = (seg.start / totalDur * 100).toFixed(2) + \'%\';\n        var tip = document.createElement(\'div\'); tip.className = \'ms-video-tl-tip\'; tip.textContent = seg.label;\n        dot.appendChild(tip);\n        (function (i) { dot.addEventListener(\'click\', function (e) { e.stopPropagation(); loadSegment(i); }); })(idx);\n        tlBar.appendChild(dot);\n      });\n    } else if (tlWrap) { tlWrap.style.display = \'none\'; }\n\n    modal.classList.add(\'show\');\n    loadSegment(currentIdx);\n\n    var prevBtnEl = document.getElementById(\'msPplVideoPrev\');\n    var nextBtnEl = document.getElementById(\'msPplVideoNext\');\n    if (prevBtnEl) {\n      var newPrev = prevBtnEl.cloneNode(true); prevBtnEl.parentNode.replaceChild(newPrev, prevBtnEl);\n      newPrev.addEventListener(\'click\', function () { if (modal._currentIdx > 0) loadSegment(modal._currentIdx - 1); });\n    }\n    if (nextBtnEl) {\n      var newNext = nextBtnEl.cloneNode(true); nextBtnEl.parentNode.replaceChild(newNext, nextBtnEl);\n      newNext.addEventListener(\'click\', function () { if (modal._segments && modal._currentIdx < modal._segments.length - 1) loadSegment(modal._currentIdx + 1); });\n    }\n  }\n\n  function renderPagination(containerId, currentPage, totalItems, onPageChange) {\n    var container = document.getElementById(containerId); if (!container) return;\n    container.innerHTML = \'\';\n    var totalPages = Math.ceil(totalItems / PAGE_SIZE);\n    if (totalPages <= 1) return;\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'display:flex;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap;\';\n\n    function makePageBtn(page) {\n      var btn = document.createElement(\'button\');\n      btn.textContent = page;\n      btn.style.cssText = \'min-width:32px;height:32px;border-radius:50%;border:1.5px solid \' + (page === currentPage ? \'#202124\' : \'#d1d5db\') + \';background:\' + (page === currentPage ? \'#202124\' : \'#fff\') + \';color:\' + (page === currentPage ? \'#fff\' : \'#202124\') + \';font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;\';\n      btn.addEventListener(\'click\', function () { onPageChange(page); });\n      return btn;\n    }\n\n    function makeDots() {\n      var outer = document.createElement(\'span\'); outer.style.cssText = \'position:relative;display:inline-flex;align-items:center;\';\n      var span = document.createElement(\'span\'); span.textContent = \'...\'; span.style.cssText = \'font-size:13px;color:#9aa0a6;padding:0 6px;cursor:pointer;border-radius:6px;transition:background .12s;\'; span.title = \'跳至頁面\';\n      var input = document.createElement(\'input\'); input.type = \'number\'; input.min = 1; input.max = totalPages; input.placeholder = \'頁\';\n      input.style.cssText = \'display:none;width:52px;height:32px;border:1.5px solid #1a56db;border-radius:8px;text-align:center;font-size:13px;font-family:inherit;outline:none;padding:0 4px;box-sizing:border-box;\';\n      span.addEventListener(\'mouseenter\', function () { span.style.background = \'#f3f4f6\'; });\n      span.addEventListener(\'mouseleave\', function () { span.style.background = \'\'; });\n      span.addEventListener(\'click\', function (e) { e.stopPropagation(); span.style.display = \'none\'; input.style.display = \'inline-block\'; input.value = \'\'; input.focus(); });\n      function commitJump() { var val = parseInt(input.value, 10); input.style.display = \'none\'; span.style.display = \'\'; if (val >= 1 && val <= totalPages) onPageChange(val); }\n      input.addEventListener(\'keydown\', function (e) { if (e.key === \'Enter\') commitJump(); if (e.key === \'Escape\') { input.style.display = \'none\'; span.style.display = \'\'; } });\n      input.addEventListener(\'blur\', function () { input.style.display = \'none\'; span.style.display = \'\'; });\n      outer.appendChild(span); outer.appendChild(input); return outer;\n    }\n\n    var prev = document.createElement(\'button\'); prev.className = \'ms-fm-icon-btn\'; prev.style.cssText = \'border-radius:50%;flex-shrink:0;\' + (currentPage === 1 ? \'opacity:0.35;\' : \'\');\n    prev.innerHTML = \'<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n    prev.disabled = currentPage === 1;\n    prev.addEventListener(\'click\', function () { if (currentPage > 1) onPageChange(currentPage - 1); });\n    wrap.appendChild(prev);\n\n    var delta = 2, pages = [], left = currentPage - delta, right = currentPage + delta;\n    for (var p = 1; p <= totalPages; p++) { if (p === 1 || p === totalPages || (p >= left && p <= right)) pages.push(p); }\n    var prev_page = null;\n    pages.forEach(function (page) { if (prev_page !== null && page - prev_page > 1) wrap.appendChild(makeDots()); wrap.appendChild(makePageBtn(page)); prev_page = page; });\n\n    var next = document.createElement(\'button\'); next.className = \'ms-fm-icon-btn\'; next.style.cssText = \'border-radius:50%;flex-shrink:0;\' + (currentPage === totalPages ? \'opacity:0.35;\' : \'\');\n    next.innerHTML = \'<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n    next.disabled = currentPage === totalPages;\n    next.addEventListener(\'click\', function () { if (currentPage < totalPages) onPageChange(currentPage + 1); });\n    wrap.appendChild(next);\n\n    var info = document.createElement(\'span\'); info.style.cssText = \'font-size:12px;color:#9aa0a6;margin-left:4px;flex-shrink:0;\'; info.textContent = \'共 \' + totalItems + \' 筆\';\n    wrap.appendChild(info);\n    container.appendChild(wrap);\n  }\n\n  function makePersonCard(person, cardType) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\') + (cardType === \'skipped\' ? \' ms-ppl-card-skipped\' : \'\');\n    card.dataset.personId = person.id;\n    var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-ppl-face-img-wrap\';\n    if (person.thumb) { imgWrap.appendChild(makeImg(person.thumb)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n    if (cardType === \'known\' && person.isNew) { var newBadge = document.createElement(\'div\'); newBadge.className = \'ms-ppl-face-new\'; newBadge.textContent = \'New\'; imgWrap.appendChild(newBadge); }\n    var starBadge = document.createElement(\'div\'); starBadge.className = \'ms-ppl-card-star\'; starBadge.textContent = \'★\'; imgWrap.appendChild(starBadge);\n    card.appendChild(imgWrap);\n    var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-ppl-face-name\' + ((!person.name || cardType === \'skipped\') ? \' pending-name\' : \'\'); nameEl.textContent = person.name || person._pendingLabel || \'（未命名）\'; card.appendChild(nameEl);\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (cardType === \'skipped\') {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplSkippedCtxMenu\'); if (!menu) return;\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n    } else if (cardType === \'pending\') {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplPendingCtxMenu\'); if (!menu) return;\n        var pendingStarItem = document.getElementById(\'msPplPendingCtxStar\');\n        if (pendingStarItem) pendingStarItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 140 > window.innerWidth) ? e.clientX - 140 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 50  > window.innerHeight) ? e.clientY - 50  : e.clientY) + \'px\';\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplCardCtxMenu\'); if (!menu) return;\n        var starItem = document.getElementById(\'msPplCardCtxStar\'); if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n    }\n    return card;\n  }\n\n  function renderGrid() { renderKnownGrid(); renderPendingGrid(); renderSkippedGrid(); }\n\n  function getFilteredPeople() {\n    var list = knownPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    if (state.searchQuery) { var q = state.searchQuery.toLowerCase(); list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); }); }\n    var sortEl = document.querySelector(\'input[name=\"ms-ppl-sort\"]:checked\');\n    var sort = sortEl ? sortEl.value : \'recent\';\n    if (sort === \'recent\') { list.sort(function (a, b) { if (!a.lastViewed && !b.lastViewed) return 0; if (!a.lastViewed) return 1; if (!b.lastViewed) return -1; return b.lastViewed - a.lastViewed; }); }\n    else if (sort === \'name_az\') { list.sort(function (a, b) { return (a.name || \'\').localeCompare(b.name || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.name || \'\').localeCompare(a.name || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'time_desc\') { list.sort(function (a, b) { return b.addedAt - a.addedAt; }); }\n    else if (sort === \'time_asc\') { list.sort(function (a, b) { return a.addedAt - b.addedAt; }); }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; var pg = document.getElementById(\'msPplKnownPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (knownPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'known\')); });\n    renderPagination(\'msPplKnownPagination\', knownPage, list.length, function (p) { knownPage = p; renderKnownGrid(); document.getElementById(\'msPplUnassignedGrid\').scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n    loadGridThumbnails(pageList);\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = pendingPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    var q = ((document.getElementById(\'msPplPendingSearchInput\') || {}).value || \'\').trim().toLowerCase();\n    if (q) { list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p._pendingLabel || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); }); }\n    var sortEl = document.querySelector(\'input[name=\"ms-pending-sort\"]:checked\');\n    var sort = sortEl ? sortEl.value : \'name_az\';\n    if (sort === \'recent\') { list.sort(function (a, b) { if (!a.lastViewed && !b.lastViewed) return 0; if (!a.lastViewed) return 1; if (!b.lastViewed) return -1; return b.lastViewed - a.lastViewed; }); }\n    else if (sort === \'name_az\') { list.sort(function (a, b) { return (a.name || a._pendingLabel || \'\').localeCompare(b.name || b._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.name || b._pendingLabel || \'\').localeCompare(a.name || a._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'time_desc\') { list.sort(function (a, b) { return b.addedAt - a.addedAt; }); }\n    else if (sort === \'time_asc\') { list.sort(function (a, b) { return a.addedAt - b.addedAt; }); }\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (q ? \'沒有符合的待定人物\' : \'目前沒有待定人物\') + \'</div>\'; var pg = document.getElementById(\'msPplPendingPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (pendingPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'pending\')); });\n    renderPagination(\'msPplPendingPagination\', pendingPage, list.length, function (p) { pendingPage = p; renderPendingGrid(); document.getElementById(\'msPplPendingGrid\').scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n    loadGridThumbnails(pageList);\n  }\n\n  var skippedPage = 1;\n\n  function renderSkippedGrid() {\n    var grid = document.getElementById(\'msPplSkippedGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = skippedPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p._pendingLabel || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); });\n    }\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (state.searchQuery ? \'沒有符合的已略過人物\' : \'目前沒有已略過人物\') + \'</div>\'; var pg = document.getElementById(\'msPplSkippedPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (skippedPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'skipped\')); });\n    renderPagination(\'msPplSkippedPagination\', skippedPage, list.length, function (p) { skippedPage = p; renderSkippedGrid(); });\n    loadGridThumbnails(pageList);\n  }\n\n  function changePersonStatus(person, newStatus) {\n    if (!person) return;\n    var oldStatus = person.status || \'pending\';\n    if (oldStatus === newStatus) return;\n    var removeFrom = oldStatus === \'confirmed\' ? knownPeople : oldStatus === \'skipped\' ? skippedPeople : pendingPeople;\n    var idx = removeFrom.findIndex(function (p) { return p.id === person.id; });\n    if (idx !== -1) removeFrom.splice(idx, 1);\n    person.status = newStatus;\n    if (newStatus === \'confirmed\') { knownPeople.push(person); }\n    else if (newStatus === \'skipped\') { skippedPeople.push(person); }\n    else { if (!person._pendingLabel) person._pendingLabel = \'未命名 #\' + String(++_unnamedCount).padStart(2, \'0\'); pendingPeople.push(person); }\n    person.userConfirmed = (newStatus === \'confirmed\');\n    person.userSkipped   = (newStatus === \'skipped\');\n    apiPatch(\'/identity/\' + person.id, { metadata: buildMetadataPatch(person) })\n      .then(function () { showToast(\'已更新狀態\'); })\n      .catch(function (e) { console.warn(\'ms-people: PATCH status 失敗\', e); showToast(\'更新失敗，請稍後再試\'); changePersonStatus(person, oldStatus); });\n    renderGrid();\n  }\n\n  function toggleStar(person) { toggleStarAndSave(person); }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id); if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  function openDetail(person) {\n    state.currentPerson = person; state.editMode = false; state.isDirty = false; state.promoteMode = false;\n    person.lastViewed = new Date();\n    applyDraftIfMatch(person); clearDraft();\n    renderDetailView(person); showView(\'msPplViewDetail\'); loadPersonDetail(person);\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) { if (person.name) { nameEl.textContent = person.name; nameEl.classList.remove(\'placeholder\'); } else { nameEl.textContent = \'加入人名\'; nameEl.classList.add(\'placeholder\'); } }\n    syncDetailStarBtns(person);\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) { aliasesEl.innerHTML = \'\'; (person.aliases || []).forEach(function (a) { var chip = document.createElement(\'span\'); chip.className = \'ms-ppl-alias-chip\'; var localeSpan = a.locale ? \'<span style=\"font-size:10px;color:#9aa0a6;margin-right:4px;\">\' + a.locale + \'</span>\' : \'\'; chip.innerHTML = localeSpan + (a.name || a); aliasesEl.appendChild(chip); }); }\n    setText(\'msPplDetailRole\', person.role); setText(\'msPplDetailNotes\', person.notes);\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (person.thumb) { avatar.appendChild(makeImg(person.thumb)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n      var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n      hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n      avatar.appendChild(hint);\n    }\n    renderFaceStrip(person); renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) { label.textContent = person.media.length ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片，共 \' + person.media.length + \' 個檔案\' : \'載入中…\'; }\n    setEditMode(false); state.isDirty = false;\n  }\n\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\'), editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\'; if (editEl) editEl.style.display = on ? \'\' : \'none\';\n    var detail = document.getElementById(\'msPplViewDetail\'); if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) { toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\'; toggle.style.color = \'#1a56db\'; }\n      else { toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\'; toggle.style.color = \'\'; }\n    }\n    if (!on) state.isDirty = false;\n  }\n\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\'); if (!strip) return;\n    strip.innerHTML = \'\';\n    (person.face_members || []).slice().sort(function (a, b) { return (b.confidence || 0) - (a.confidence || 0); }).slice(0, 20).forEach(function (fm) {\n      var el = document.createElement(\'div\'); el.className = \'ms-ppl-strip-face\'; el.dataset.fmId = fm.id;\n      var imgBox = document.createElement(\'div\'); imgBox.className = \'ms-ppl-strip-face-img\'; imgBox.style.position = \'relative\';\n      if (fm.thumb) { imgBox.appendChild(makeImg(fm.thumb)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      if (fm.confidence) { var pct = document.createElement(\'div\'); pct.style.cssText = \'position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:9px;color:#fff;background:rgba(0,0,0,.45);border-radius:0 0 10px 10px;padding:1px 0;\'; pct.textContent = Math.round(fm.confidence * 100) + \'%\'; imgBox.appendChild(pct); }\n      el.appendChild(imgBox);\n      var removeBtn = document.createElement(\'button\'); removeBtn.className = \'ms-ppl-strip-remove-btn\'; removeBtn.textContent = \'×\'; removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); state.ctxFmId = fm.id; showModal(\'msPplRemoveModal\'); });\n      el.appendChild(removeBtn);\n      el.addEventListener(\'contextmenu\', function (e) { e.preventDefault(); state.ctxFmId = fm.id; showCtxMenu(e.clientX, e.clientY); });\n      strip.appendChild(el);\n    });\n    var wrap = document.getElementById(\'msPplViewDetail\'); if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!media.length) return;\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\'); el.className = \'ms-ppl-media-item\';\n      if (item.file_uuid) el.dataset.fileUuid = item.file_uuid;\n      var dur = item.duration ? formatSecs(item.duration) : \'\';\n      var durHtml = dur ? \'<span class=\"ms-ppl-media-dur\">\' + dur + \'</span>\' : \'\';\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\" title=\"點擊播放\">\' +\n          \'<div class=\"ms-thumb-bg\" \' + (item.thumb ? \'style=\"background-image:url(\' + item.thumb + \');background-size:cover;background-position:center;\"\' : \'\') + \'></div>\' +\n          \'<div class=\"ms-thumb-play-circle\"><svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"6,3 20,12 6,21\" fill=\"rgba(255,255,255,0.75)\"/></svg></div>\' +\n          durHtml + (item.confidence != null ? \'<span class=\"ms-ppl-media-badge-conf\">\' + item.confidence + \'%</span>\' : \'\') +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\"><div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div><div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div></div>\';\n      var thumbEl = el.querySelector(\'.ms-ppl-media-thumb\');\n      (function (fUuid, mediaItem) {\n        thumbEl.addEventListener(\'click\', function (e) {\n          e.stopPropagation();\n          if (mediaItem._segments && mediaItem._segments.length) { openVideoPlayer(fUuid, mediaItem._segments, 0); }\n          else if (!mediaItem._segmentsLoaded) {\n            if (!el.dataset.tlLoaded) { el.dataset.tlLoaded = \'1\'; loadFaceTimeline(mediaItem, el, function () { openVideoPlayer(fUuid, mediaItem._segments && mediaItem._segments.length ? mediaItem._segments : null, 0); }); }\n            else { openVideoPlayer(fUuid, null, 0); }\n          } else { openVideoPlayer(fUuid, mediaItem._segments && mediaItem._segments.length ? mediaItem._segments : null, 0); }\n        });\n      })(item.file_uuid, item);\n      grid.appendChild(el);\n    });\n  }\n\n  function loadFaceTimeline(item, cardEl, onDone) {\n    var fileUuid = item.file_uuid; if (!fileUuid) { if (onDone) onDone(); return; }\n    var person = state.currentPerson; if (!person) { if (onDone) onDone(); return; }\n    var traceIds = (person.face_members || []).map(function (fm) { return fm.trace_id; }).filter(Boolean);\n    var allFaces = [], PAGE = 500;\n    function fetchPage(page) { return apiFetch(\'/file/\' + fileUuid + \'/faces?binding=identity&page=\' + page + \'&page_size=\' + PAGE); }\n    fetchPage(1).then(function (body) {\n      if (!body || !Array.isArray(body.data)) throw new Error(\'no data\');\n      allFaces = allFaces.concat(body.data);\n      var total = body.total || 0, totalPages = Math.ceil(total / PAGE), remaining = [];\n      for (var p = 2; p <= Math.min(totalPages, 10); p++) { remaining.push(fetchPage(p)); }\n      return Promise.all(remaining);\n    }).then(function (pages) {\n      (pages || []).forEach(function (body) { if (body && Array.isArray(body.data)) allFaces = allFaces.concat(body.data); });\n      var traceSet = {}; traceIds.forEach(function (id) { traceSet[id] = true; });\n      var myFaces = allFaces.filter(function (f) { return traceSet[f.trace_id]; });\n      if (!myFaces.length) { item._segments = []; item._segmentsLoaded = true; if (onDone) onDone(); return; }\n      myFaces.sort(function (a, b) { return a.timestamp_secs - b.timestamp_secs; });\n      var segments = [], cur = null;\n      myFaces.forEach(function (f) {\n        if (!cur || f.timestamp_secs - cur.end > 2) { cur = { start: f.timestamp_secs, end: f.timestamp_secs, count: 1 }; segments.push(cur); }\n        else { cur.end = f.timestamp_secs; cur.count++; }\n      });\n      item._segments = segments.map(function (seg) { return { start: Math.max(0, Math.round(seg.start) - 1), end: Math.round(seg.end) + 1, label: formatSecs(Math.round(seg.start)) + \' – \' + formatSecs(Math.round(seg.end)) }; });\n      item._segmentsLoaded = true;\n      if (onDone) onDone();\n    }).catch(function (e) { console.warn(\'ms-people: loadFaceTimeline 失敗\', fileUuid, e); item._segments = []; item._segmentsLoaded = true; if (onDone) onDone(); });\n  }\n\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\'); if (!wrap) return; wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\'); tag.className = \'ms-ppl-alias-tag\';\n      var localeLabel = alias.locale ? \'<span style=\"font-size:10px;color:#9aa0a6;margin-right:3px;\">\' + alias.locale + \'</span>\' : \'\';\n      tag.innerHTML = localeLabel + (alias.name || \'\') + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () { state.currentAliases.splice(Number(this.dataset.idx), 1); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); });\n      wrap.appendChild(tag);\n    });\n  }\n\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource = sourcePerson; state.mergeTarget = null; state.mergeFromDetail = fromDetail;\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) { if (sourcePerson.thumb) { triggerFaceEl.innerHTML = \'\'; triggerFaceEl.appendChild(makeImg(sourcePerson.thumb)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; } }\n    var searchEl = document.getElementById(\'msMergeSearchInput\'); if (searchEl) searchEl.value = \'\';\n    renderMergeGrid(\'\'); showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\'); if (!grid) return; grid.innerHTML = \'\';\n    function filterAndSort(source) {\n      return source.filter(function (p) { if (state.mergeSource && p.id === state.mergeSource.id) return false; if (!query) return true; return (p.name || p._pendingLabel || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1; })\n        .sort(function (a, b) { return (a.name || a._pendingLabel || \'\').localeCompare(b.name || b._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); });\n    }\n    function makeCard(person) {\n      var card = document.createElement(\'div\'); card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\'); card.dataset.personId = person.id;\n      var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-merge-face-img\';\n      if (person.thumb) { imgWrap.appendChild(makeImg(person.thumb)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n      var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-merge-face-name\'; nameEl.textContent = person.name || person._pendingLabel || \'（未命名）\';\n      card.appendChild(imgWrap); card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { state.mergeTarget = person.id; var g = document.getElementById(\'msMergeGrid\'); if (g) g.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) { c.classList.toggle(\'selected\', c.dataset.personId === person.id); }); });\n      return card;\n    }\n    function makeSectionTitle(text) { var el = document.createElement(\'div\'); el.style.cssText = \'width:100%;font-size:11px;font-weight:700;color:#9aa0a6;letter-spacing:.06em;text-transform:uppercase;padding:4px 0 10px;margin-top:4px;\'; el.textContent = text; return el; }\n    function makeSection(people, title) { if (!people.length) return; grid.appendChild(makeSectionTitle(title)); var row = document.createElement(\'div\'); row.style.cssText = \'display:flex;flex-wrap:wrap;gap:16px;width:100%;margin-bottom:20px;\'; people.forEach(function (p) { row.appendChild(makeCard(p)); }); grid.appendChild(row); }\n    var knownList = filterAndSort(knownPeople), pendingList = filterAndSort(pendingPeople);\n    if (!knownList.length && !pendingList.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; return; }\n    makeSection(knownList, \'已知人物\'); makeSection(pendingList, \'待定人物\');\n  }\n\n  function loadPersonDetail(person) {\n    if (_detailCache[person.id]) { applyDetailCache(person); return Promise.resolve(); }\n    return Promise.all([\n      apiFetch(\'/identity/\' + person.id + \'/traces\'),\n      apiFetch(\'/identity/\' + person.id + \'/files\'),\n    ]).then(function (results) {\n      var tracesBody = results[0], filesBody = results[1];\n      var traces = (tracesBody && Array.isArray(tracesBody.traces)) ? tracesBody.traces : (tracesBody && Array.isArray(tracesBody.data)) ? tracesBody.data : [];\n      person.face_members = traces.map(function (t) { return { id: t.trace_id, numeric_id: t.trace_id, thumb: null, file_uuid: t.file_uuid, trace_id: t.trace_id, frame: t.first_frame, timestamp: t.first_sec, confidence: t.avg_confidence }; });\n      person.thumb = null;\n      fetch(API_BASE + \'/identity/\' + person.id + \'/profile-image\', { headers: { \'X-API-Key\': API_KEY } })\n        .then(function (r) {\n          if (!r.ok) return;\n          return r.blob().then(function (blob) {\n            var blobUrl = URL.createObjectURL(blob); person.thumb = blobUrl; person._hasProfileImage = true;\n            var avatar = document.getElementById(\'msPplAvatar\');\n            if (avatar && state.currentPerson && state.currentPerson.id === person.id) {\n              avatar.innerHTML = \'\'; avatar.appendChild(makeImg(blobUrl));\n              var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n              hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n              avatar.appendChild(hint);\n            }\n            var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n            if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) existing.replaceWith(makeImg(blobUrl)); } }\n          });\n        }).catch(function () {});\n      var files = (filesBody && Array.isArray(filesBody.data)) ? filesBody.data : (filesBody && Array.isArray(filesBody.files)) ? filesBody.files : (filesBody && Array.isArray(filesBody)) ? filesBody : [];\n      person.media = files.map(function (f) {\n        var dur = f.metadata && f.metadata.duration ? parseFloat(f.metadata.duration) : 0;\n        return { title: cleanFileName(f.file_name), subtitle: (f.first_appearance != null ? \'首次出現 \' + formatSecs(f.first_appearance) : \'\') + (f.last_appearance != null ? \'　最後 \' + formatSecs(f.last_appearance) : \'\'), thumb: null, type: \'video\', duration: Math.round(dur), confidence: f.confidence ? Math.round(f.confidence * 100) : null, face_count: f.face_count || 0, file_uuid: f.file_uuid };\n      });\n      person.media.forEach(function (mediaItem) {\n        if (!mediaItem.file_uuid) return;\n        var fm = (person.face_members || []).find(function (f) { return f.file_uuid === mediaItem.file_uuid; });\n        var thumbUrl = fm ? API_BASE + \'/file/\' + fm.file_uuid + \'/trace/\' + fm.trace_id + \'/thumbnail\' : API_BASE + \'/file/\' + mediaItem.file_uuid + \'/thumbnail\';\n        fetch(thumbUrl, { headers: { \'X-API-Key\': API_KEY } })\n          .then(function (r) {\n            if (!r.ok) { var fallback = fm ? API_BASE + \'/file/\' + mediaItem.file_uuid + \'/thumbnail\' : null; if (!fallback) return; return fetch(fallback, { headers: { \'X-API-Key\': API_KEY } }); }\n            return r;\n          })\n          .then(function (r) {\n            if (!r || !r.ok) return;\n            return r.blob().then(function (blob) {\n              mediaItem.thumb = URL.createObjectURL(blob);\n              var bg = document.querySelector(\'.ms-ppl-media-item[data-file-uuid=\"\' + mediaItem.file_uuid + \'\"] .ms-thumb-bg\');\n              if (bg) { bg.style.backgroundImage = \'url(\' + mediaItem.thumb + \')\'; bg.style.backgroundSize = \'cover\'; bg.style.backgroundPosition = \'center\'; }\n            });\n          }).catch(function () {});\n      });\n      var thumbFactories = person.face_members.filter(function (fm) { return fm.file_uuid && fm.trace_id; }).slice(0, 20).map(function (fm) {\n        return function () {\n          return fetch(API_BASE + \'/file/\' + fm.file_uuid + \'/trace/\' + fm.trace_id + \'/thumbnail\', { headers: { \'X-API-Key\': API_KEY } })\n            .then(function (r) { if (!r.ok) return; return r.blob().then(function (blob) { fm.thumb = URL.createObjectURL(blob); if (!person.thumb) person.thumb = fm.thumb; }); })\n            .catch(function () {});\n        };\n      });\n      return throttledPool(thumbFactories, 5).then(function () {\n        var avatar = document.getElementById(\'msPplAvatar\'); if (avatar && person.thumb) { avatar.innerHTML = \'\'; avatar.appendChild(makeImg(person.thumb)); }\n        var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n        if (card && person.thumb) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) { existing.replaceWith(makeImg(person.thumb)); } else { imgWrap.insertBefore(makeImg(person.thumb), imgWrap.firstChild); } } }\n        person._metaLoaded = true; _detailCache[person.id] = true; applyDetailCache(person);\n      });\n    }).catch(function (e) { console.warn(\'ms-people: 載入人物詳情失敗\', person.id, e); _detailCache[person.id] = true; applyDetailCache(person); });\n  }\n\n  function applyDetailCache(person) {\n    if (!state.currentPerson || state.currentPerson.id !== person.id) return;\n    renderFaceStrip(person); renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\'); if (label) { label.textContent = person.media.length ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片，共 \' + person.media.length + \' 個檔案\' : \'尚未找到相關影片\'; }\n  }\n\n  function loadGridThumbnails(people) {\n    var factories = people.filter(function (person) { return !person.thumb && !person._thumbLoading; }).map(function (person) {\n      person._thumbLoading = true;\n      return function () {\n        return apiFetch(\'/identity/\' + person.id + \'/traces\').then(function (body) {\n          var traces = (body && Array.isArray(body.traces)) ? body.traces : (body && Array.isArray(body.data)) ? body.data : [];\n          if (!traces.length) return; var t = traces[0]; if (!t.file_uuid || !t.trace_id) return;\n          return fetch(API_BASE + \'/file/\' + t.file_uuid + \'/trace/\' + t.trace_id + \'/thumbnail\', { headers: { \'X-API-Key\': API_KEY } }).then(function (r) {\n            if (!r.ok) return;\n            return r.blob().then(function (blob) {\n              person.thumb = URL.createObjectURL(blob);\n              var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n              if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) { existing.replaceWith(makeImg(person.thumb)); } else { imgWrap.insertBefore(makeImg(person.thumb), imgWrap.firstChild); } } }\n            });\n          });\n        }).catch(function () { person._thumbLoading = false; });\n      };\n    });\n    throttledPool(factories, 5);\n  }\n\n  function showToast(msg) {\n    var existing = document.getElementById(\'msPplToast\'); if (existing) existing.remove();\n    var toast = document.createElement(\'div\'); toast.id = \'msPplToast\'; toast.textContent = msg;\n    toast.style.cssText = \'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#202124;color:#fff;font-family:\"DM Sans\",\"Noto Sans TC\",sans-serif;font-size:13px;padding:10px 20px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:99999;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap;\';\n    document.body.appendChild(toast);\n    requestAnimationFrame(function () { toast.style.opacity = \'1\'; });\n    setTimeout(function () { toast.style.opacity = \'0\'; setTimeout(function () { if (toast.parentNode) toast.remove(); }, 300); }, 3000);\n  }\n\n  function bindEvents() {\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu(); });\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu(); });\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu(); });\n    document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) { o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); }); });\n\n    var pendingSearchInput = document.getElementById(\'msPplPendingSearchInput\');\n    if (pendingSearchInput) { pendingSearchInput.addEventListener(\'input\', function () { pendingPage = 1; renderPendingGrid(); }); }\n\n    var pendingSortBtn = document.getElementById(\'msPplPendingSortBtn\'), pendingSortPanel = document.getElementById(\'msPplPendingSortPanel\');\n    if (pendingSortBtn && pendingSortPanel) {\n      pendingSortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); pendingSortPanel.classList.toggle(\'show\'); });\n      document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplPendingSortPanel\') && !e.target.closest(\'#msPplPendingSortBtn\')) pendingSortPanel.classList.remove(\'show\'); });\n    }\n    document.querySelectorAll(\'input[name=\"ms-pending-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { pendingPage = 1; if (pendingSortPanel) pendingSortPanel.classList.remove(\'show\'); renderPendingGrid(); }); });\n\n    var starToggleBtn = document.getElementById(\'msPplStarToggleBtn\'), starToggleLabel = document.getElementById(\'msPplStarToggleLabel\'), sectionTitle = document.getElementById(\'msPplSectionTitle\');\n    if (starToggleBtn) {\n      starToggleBtn.addEventListener(\'click\', function () {\n        state.showStarred = !state.showStarred; knownPage = 1;\n        starToggleBtn.classList.toggle(\'active\', state.showStarred);\n        var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n        var starredPending = pendingPeople.some(function (p) { return p.isStarred; });\n        var starredSkipped = skippedPeople.some(function (p) { return p.isStarred; });\n        if (state.showStarred) {\n          var tp0 = document.getElementById(\'msPplTogglePending\'), tu0 = document.getElementById(\'msPplToggleUface\'), ts0 = document.getElementById(\'msPplToggleSkipped\');\n          state._savedPendingActive = tp0 ? tp0.getAttribute(\'data-active\') : \'true\';\n          state._savedUfaceActive   = tu0 ? tu0.getAttribute(\'data-active\') : \'true\';\n          state._savedSkippedActive = ts0 ? ts0.getAttribute(\'data-active\') : \'false\';\n          starToggleLabel.textContent = \'查看所有人物\';\n          if (starIcon) starIcon.style.display = \'none\';\n          sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n          var tpBtn = document.getElementById(\'msPplTogglePending\'); if (tpBtn) tpBtn.style.display = \'\';\n          var ufaceBtn = document.getElementById(\'msPplToggleUface\'); if (ufaceBtn) ufaceBtn.style.display = \'none\';\n          var skippedBtn = document.getElementById(\'msPplToggleSkipped\'); if (skippedBtn) skippedBtn.style.display = \'none\';\n          var tp = document.getElementById(\'msPplTogglePending\'), ts = document.getElementById(\'msPplToggleSkipped\');\n          if (tp) tp.setAttribute(\'data-active\', String(starredPending));\n          if (ts) ts.setAttribute(\'data-active\', String(starredSkipped));\n          [\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = starredPending ? \'\' : \'none\'; });\n          var skippedSec = document.getElementById(\'msPplSkippedSection\'); if (skippedSec) skippedSec.style.display = starredSkipped ? \'\' : \'none\';\n          [\'msPplUnboundHr\', \'msPplUnboundTitle\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = \'none\'; });\n          var hr = document.querySelector(\'.ms-ppl-hr\'); if (hr) hr.style.display = starredPending ? \'\' : \'none\';\n        } else {\n          starToggleLabel.textContent = \'查看重要人物\';\n          if (starIcon) starIcon.style.display = \'\';\n          sectionTitle.textContent = \'已知人物：\';\n          [\'msPplTogglePending\', \'msPplToggleUface\', \'msPplToggleSkipped\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = \'\'; });\n          var tp2 = document.getElementById(\'msPplTogglePending\'), tu2 = document.getElementById(\'msPplToggleUface\'), ts2 = document.getElementById(\'msPplToggleSkipped\');\n          var pendingActive = state._savedPendingActive !== undefined ? state._savedPendingActive : \'true\';\n          var ufaceActive   = state._savedUfaceActive   !== undefined ? state._savedUfaceActive   : \'true\';\n          var skippedActive = state._savedSkippedActive !== undefined ? state._savedSkippedActive : \'false\';\n          if (tp2) tp2.setAttribute(\'data-active\', pendingActive);\n          if (tu2) tu2.setAttribute(\'data-active\', ufaceActive);\n          if (ts2) ts2.setAttribute(\'data-active\', skippedActive);\n          [\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = (pendingActive === \'true\') ? \'\' : \'none\'; });\n          [\'msPplUnboundHr\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = (ufaceActive === \'true\') ? \'\' : \'none\'; });\n          var skippedSec2 = document.getElementById(\'msPplSkippedSection\'); if (skippedSec2) skippedSec2.style.display = (skippedActive === \'true\') ? \'\' : \'none\';\n          var hr2 = document.querySelector(\'.ms-ppl-hr\'); if (hr2) hr2.style.display = (pendingActive === \'true\') ? \'\' : \'none\';\n        }\n        renderGrid();\n      });\n    }\n\n    var searchInput = document.getElementById(\'msPplSearchInput\');\n    if (searchInput) { searchInput.addEventListener(\'input\', function () { state.searchQuery = this.value.trim(); knownPage = 1; renderKnownGrid(); }); }\n\n    var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n    if (refreshBtn) { refreshBtn.addEventListener(\'click\', function () { state.searchQuery = \'\'; knownPage = 1; pendingPage = 1; if (searchInput) searchInput.value = \'\'; renderGrid(); }); }\n\n    var sortBtn = document.getElementById(\'msPplSortBtn\'), sortPanel = document.getElementById(\'msPplSortPanel\');\n    if (sortBtn && sortPanel) { sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); }); document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\'); }); }\n    document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { state.sortMode = this.value; knownPage = 1; if (sortPanel) sortPanel.classList.remove(\'show\'); renderGrid(); }); });\n\n    function setSectionVisible(sectionIds, hrSelector, visible) {\n      sectionIds.forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = visible ? \'\' : \'none\'; });\n      if (hrSelector) { var hr = document.querySelector(hrSelector); if (hr) hr.style.display = visible ? \'\' : \'none\'; }\n    }\n\n    var togglePendingBtn = document.getElementById(\'msPplTogglePending\');\n    if (togglePendingBtn) {\n      togglePendingBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        setSectionVisible([\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'], null, next);\n        var hr = document.querySelector(\'.ms-ppl-hr\'); if (hr) hr.style.display = next ? \'\' : \'none\';\n      });\n    }\n\n    var toggleUfaceBtn = document.getElementById(\'msPplToggleUface\');\n    if (toggleUfaceBtn) {\n      toggleUfaceBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        setSectionVisible([\'msPplUnboundHr\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'], null, next);\n      });\n    }\n\n    var toggleSkippedBtn = document.getElementById(\'msPplToggleSkipped\');\n    if (toggleSkippedBtn) {\n      toggleSkippedBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        var section = document.getElementById(\'msPplSkippedSection\'); if (section) section.style.display = next ? \'\' : \'none\';\n        if (next) renderSkippedGrid();\n      });\n    }\n\n    var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\'); if (cardCtxMerge) { cardCtxMerge.addEventListener(\'click\', function () { if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false); hideCardCtxMenu(); }); }\n    var cardCtxStar = document.getElementById(\'msPplCardCtxStar\'); if (cardCtxStar) { cardCtxStar.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; toggleStar(state.ctxCardPerson); hideCardCtxMenu(); renderGrid(); }); }\n    var cardCtxToPending = document.getElementById(\'msPplCardCtxToPending\'); if (cardCtxToPending) { cardCtxToPending.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'pending\'); hideCardCtxMenu(); }); }\n    var cardCtxSkip = document.getElementById(\'msPplCardCtxSkip\'); if (cardCtxSkip) { cardCtxSkip.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'skipped\'); hideCardCtxMenu(); }); }\n\n    var pendingCtxConfirm = document.getElementById(\'msPplPendingCtxConfirm\'); if (pendingCtxConfirm) { pendingCtxConfirm.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'confirmed\'); hidePendingCtxMenu(); }); }\n    var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\'); if (pendingCtxMerge) { pendingCtxMerge.addEventListener(\'click\', function () { if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false); hidePendingCtxMenu(); }); }\n    var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n    if (pendingCtxPromote) {\n      pendingCtxPromote.addEventListener(\'click\', function () {\n        if (!state.ctxCardPerson) return;\n        var person = state.ctxCardPerson; hidePendingCtxMenu(); openDetail(person);\n        setTimeout(function () {\n          setVal(\'msPplEditName\', person.name); setVal(\'msPplEditRole\', person.role); setVal(\'msPplEditNotes\', person.notes);\n          state.currentAliases = (person.aliases || []).slice(); renderAliases(); syncDetailStarBtns(person);\n          setEditMode(true); renderFaceStrip(person); state.isDirty = false; state.promoteMode = true;\n        }, 50);\n      });\n    }\n    var pendingCtxStar = document.getElementById(\'msPplPendingCtxStar\');\n    if (pendingCtxStar) {\n      pendingCtxStar.addEventListener(\'click\', function () {\n        if (!state.ctxCardPerson) return; toggleStar(state.ctxCardPerson);\n        var starItem = document.getElementById(\'msPplPendingCtxStar\'); if (starItem) starItem.textContent = state.ctxCardPerson.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        hidePendingCtxMenu(); renderGrid();\n      });\n    }\n    var pendingCtxSkip = document.getElementById(\'msPplPendingCtxSkip\'); if (pendingCtxSkip) { pendingCtxSkip.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'skipped\'); hidePendingCtxMenu(); }); }\n\n    function hideSkippedCtxMenu() { var m = document.getElementById(\'msPplSkippedCtxMenu\'); if (m) m.classList.remove(\'show\'); }\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplSkippedCtxMenu\')) hideSkippedCtxMenu(); });\n    var skippedCtxConfirm = document.getElementById(\'msPplSkippedCtxConfirm\'); if (skippedCtxConfirm) { skippedCtxConfirm.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'confirmed\'); hideSkippedCtxMenu(); }); }\n    var skippedCtxToPending = document.getElementById(\'msPplSkippedCtxToPending\'); if (skippedCtxToPending) { skippedCtxToPending.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'pending\'); hideSkippedCtxMenu(); }); }\n    var skippedCtxDelete = document.getElementById(\'msPplSkippedCtxDelete\'); if (skippedCtxDelete) { skippedCtxDelete.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; state.currentPerson = state.ctxCardPerson; hideSkippedCtxMenu(); showModal(\'msPplDeleteModal\'); }); }\n\n    var backBtn = document.getElementById(\'msPplBackBtn\');\n    if (backBtn) {\n      backBtn.addEventListener(\'click\', function () {\n        if (!state.isDirty) { renderGrid(); showView(\'msPplViewList\'); return; }\n        showDirtyLeaveModal(\n          function () {\n            var p = state.currentPerson; if (!p) return;\n            p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n            saveDraft(p);\n            if (state.promoteMode) { p.userConfirmed = true; p.userSkipped = false; }\n            apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) }).then(function () {\n              clearDraft();\n              if (state.promoteMode) { state.promoteMode = false; p.status = \'confirmed\'; var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; }); if (ip !== -1) { pendingPeople.splice(ip, 1); knownPeople.push(p); } }\n              state.isDirty = false; hideModal(\'msPplDirtyLeaveModal\'); renderGrid(); showView(\'msPplViewList\');\n            }).catch(function (e) { console.warn(\'ms-people: PATCH 失敗\', e); });\n          },\n          function () { state.isDirty = false; clearDraft(); hideModal(\'msPplDirtyLeaveModal\'); renderGrid(); showView(\'msPplViewList\'); }\n        );\n      });\n    }\n\n    var editToggle = document.getElementById(\'msPplEditToggle\');\n    if (editToggle) {\n      editToggle.addEventListener(\'click\', function () {\n        if (!state.currentPerson) return;\n        if (state.editMode) { if (state.isDirty) { showDirtyDiscardModal(function () { hideModal(\'msPplDirtyDiscardModal\'); renderDetailView(state.currentPerson); }); return; } renderDetailView(state.currentPerson); return; }\n        var p = state.currentPerson; setVal(\'msPplEditName\', p.name); setVal(\'msPplEditRole\', p.role); setVal(\'msPplEditNotes\', p.notes);\n        state.currentAliases = (p.aliases || []).slice(); renderAliases(); syncDetailStarBtns(p); setEditMode(true); renderFaceStrip(p);\n      });\n    }\n    [\'msPplEditName\', \'msPplEditRole\', \'msPplEditNotes\'].forEach(function (id) {\n      var el = document.getElementById(id); if (el) { el.addEventListener(\'input\', function () { if (state.editMode) state.isDirty = true; }); }\n    });\n\n    var saveBtn = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtn) {\n      saveBtn.addEventListener(\'click\', function () {\n        var p = state.currentPerson; if (!p) return;\n        var backup = { name: p.name, role: p.role, notes: p.notes, aliases: p.aliases.slice(), isStarred: p.isStarred };\n        p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n        saveBtn.classList.add(\'ms-ppl-saving\');\n        if (state.promoteMode) { p.userConfirmed = true; p.userSkipped = false; }\n        apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) })\n          .then(function () {\n            state.isDirty = false; clearDraft();\n            if (state.promoteMode) {\n              state.promoteMode = false; p.status = \'confirmed\';\n              var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; });\n              if (ip !== -1) { pendingPeople.splice(ip, 1); knownPeople.push(p); }\n              renderGrid(); showView(\'msPplViewList\');\n            } else { renderDetailView(p); renderGrid(); }\n          }).catch(function (e) {\n            console.warn(\'ms-people: PATCH identity 失敗\', e);\n            p.name = backup.name; p.role = backup.role; p.notes = backup.notes; p.aliases = backup.aliases; p.isStarred = backup.isStarred;\n            alert(\'儲存失敗，資料已暫存，請稍後再試\');\n          }).finally(function () { saveBtn.classList.remove(\'ms-ppl-saving\'); });\n      });\n    }\n\n    var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n    if (cancelBtn) {\n      cancelBtn.addEventListener(\'click\', function () {\n        if (state.isDirty) { showDirtyDiscardModal(function () { hideModal(\'msPplDirtyDiscardModal\'); clearDraft(); if (state.currentPerson) renderDetailView(state.currentPerson); else setEditMode(false); }); return; }\n        if (state.currentPerson) renderDetailView(state.currentPerson); else setEditMode(false);\n      });\n    }\n\n    var addAliasBtn = document.getElementById(\'msPplAddAlias\'), aliasInlineWrap = document.getElementById(\'msPplAliasInlineWrap\'), aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n    if (addAliasBtn) { addAliasBtn.addEventListener(\'click\', function () { if (!aliasInlineWrap || !aliasInlineInput) return; aliasInlineWrap.style.display = \'flex\'; aliasInlineInput.value = \'\'; aliasInlineInput.focus(); addAliasBtn.style.display = \'none\'; }); }\n\n    var starBtn = document.getElementById(\'msPplStarBtn\');\n    if (starBtn) { starBtn.addEventListener(\'click\', function () { if (!state.currentPerson) return; toggleStar(state.currentPerson); syncDetailStarBtns(state.currentPerson); renderGrid(); showToast(state.currentPerson.isStarred ? \'已標記為重要人物\' : \'已取消重要人物\'); }); }\n\n    var starBtnEdit = document.getElementById(\'msPplStarBtnEdit\');\n    if (starBtnEdit) { starBtnEdit.addEventListener(\'click\', function () { if (!state.currentPerson) return; toggleStar(state.currentPerson); syncDetailStarBtns(state.currentPerson); renderGrid(); showToast(state.currentPerson.isStarred ? \'已標記為重要人物\' : \'已取消重要人物\'); }); }\n\n    var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n    if (addTagBtn) {\n      addTagBtn.addEventListener(\'click\', function () {\n        if (!state.currentPerson) return; var p = state.currentPerson;\n        setVal(\'msPplEditName\', p.name); setVal(\'msPplEditRole\', p.role); setVal(\'msPplEditNotes\', p.notes);\n        state.currentAliases = (p.aliases || []).slice(); renderAliases(); syncDetailStarBtns(p); setEditMode(true); renderFaceStrip(p);\n        setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n      });\n    }\n\n    if (aliasInlineInput) {\n      aliasInlineInput.addEventListener(\'keydown\', function (e) {\n        if (e.key === \'Enter\') {\n          e.preventDefault(); var val = aliasInlineInput.value.trim();\n          var localeEl = document.getElementById(\'msPplAliasLocaleSelect\'); var locale = localeEl ? localeEl.value : \'zh-TW\';\n          if (val) { state.currentAliases.push({ locale: locale, name: val }); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); }\n          aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\';\n        }\n        if (e.key === \'Escape\') { aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\'; }\n      });\n      aliasInlineInput.addEventListener(\'blur\', function (e) {\n        var localeEl = document.getElementById(\'msPplAliasLocaleSelect\');\n        if (localeEl && e.relatedTarget === localeEl) return;\n        var val = aliasInlineInput.value.trim(); var locale = localeEl ? localeEl.value : \'zh-TW\';\n        if (val) { state.currentAliases.push({ locale: locale, name: val }); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); }\n        aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\';\n      });\n    }\n\n    var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n    if (removeConfirm) {\n      removeConfirm.addEventListener(\'click\', function () {\n        if (state.ctxFmId && state.currentPerson) {\n          var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n          if (fm) { state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; }); state.currentPerson.thumb = null; pendingPeople.unshift({ id: \'pending-\' + Date.now(), name: \'\', thumb: null, isNew: false, isStarred: false, aliases: [], role: \'\', notes: \'\', addedAt: new Date(), lastViewed: null, face_members: [fm], media: [] }); state.ctxFmId = null; renderDetailView(state.currentPerson); renderPendingGrid(); }\n        }\n        hideModal(\'msPplRemoveModal\');\n      });\n    }\n    var removeCancel = document.getElementById(\'msPplRemoveCancel\'); if (removeCancel) { removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); }); }\n\n    var stripAddBtn = document.getElementById(\'msPplStripAddBtn\'); if (stripAddBtn) { stripAddBtn.addEventListener(\'click\', function () { if (!state.currentPerson) return; openMergeModal(state.currentPerson, true); }); }\n\n    var mergeSearchInput = document.getElementById(\'msMergeSearchInput\'); if (mergeSearchInput) { mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); }); }\n    var mergeCancel = document.getElementById(\'msMergeCancel\'); if (mergeCancel) { mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); state.mergeTarget = null; }); }\n    var mergeConfirm = document.getElementById(\'msMergeConfirm\'); if (mergeConfirm) { mergeConfirm.addEventListener(\'click\', function () { if (!state.mergeTarget) return; hideModal(\'msPplMergeModal\'); showModal(\'msPplConfirmMergeModal\'); }); }\n\n    var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n    if (confirmMergeOk) {\n      confirmMergeOk.addEventListener(\'click\', function () {\n        if (state.mergeSource && state.mergeTarget) {\n          var all = knownPeople.concat(pendingPeople);\n          var target = all.find(function (p) { return p.id === state.mergeTarget; });\n          var source = state.mergeSource;\n          if (target && source) {\n            apiPost(\'/identity/\' + source.id + \'/mergeinto\', { into_uuid: target.id, keep_history: false })\n              .then(function (res) { var transferred = (res && res.data && res.data.faces_transferred != null) ? res.data.faces_transferred : null; showToast(transferred !== null ? \'合併完成，已轉移 \' + transferred + \' 個識別記錄\' : \'合併完成\'); })\n              .catch(function (e) { console.warn(\'ms-people: mergeinto 失敗\', e); showToast(\'合併失敗，請稍後再試\'); });\n            target.face_members = (target.face_members || []).concat(source.face_members || []);\n            target.media = (target.media || []).concat(source.media || []);\n            if (!target.thumb && source.thumb) target.thumb = source.thumb;\n            _detailCache[target.id] = false; clearPersonCache(source);\n            var ik = knownPeople.findIndex(function (p) { return p.id === source.id; }); if (ik !== -1) knownPeople.splice(ik, 1);\n            var ip = pendingPeople.findIndex(function (p) { return p.id === source.id; }); if (ip !== -1) pendingPeople.splice(ip, 1);\n          }\n        }\n        hideModal(\'msPplConfirmMergeModal\'); state.mergeSource = null; state.mergeTarget = null;\n        knownPage = 1; pendingPage = 1; renderGrid(); showView(\'msPplViewList\');\n      });\n    }\n    var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\'); if (confirmMergeCancel) { confirmMergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplConfirmMergeModal\'); showModal(\'msPplMergeModal\'); }); }\n\n    // ✅ 大頭照上傳：走 PHP proxy\n    var avatarEl = document.getElementById(\'msPplAvatar\');\n    var avatarInput = document.getElementById(\'msPplAvatarInput\');\n    if (avatarEl && avatarInput) {\n      avatarEl.addEventListener(\'click\', function () { if (!state.currentPerson) return; avatarInput.value = \'\'; avatarInput.click(); });\n      avatarInput.addEventListener(\'change\', function () {\n        var file = avatarInput.files[0]; if (!file || !state.currentPerson) return;\n        var person = state.currentPerson;\n        var formData = new FormData(); formData.append(\'image\', file);\n        avatarEl.style.opacity = \'0.5\';\n        fetch(PROXY_BASE + \'/identity/\' + person.id + \'/profile-image\', {\n          method: \'POST\',\n          credentials: \'same-origin\',\n          headers: { \'X-WP-Nonce\': wpRestNonce },\n          body: formData,\n        }).then(function (r) {\n          if (!r.ok) throw new Error(\'HTTP \' + r.status);\n          var blobUrl = URL.createObjectURL(file);\n          if (person.thumb && person.thumb.startsWith(\'blob:\')) URL.revokeObjectURL(person.thumb);\n          person.thumb = blobUrl; person._hasProfileImage = true;\n          avatarEl.innerHTML = \'\'; avatarEl.appendChild(makeImg(blobUrl));\n          var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n          hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n          avatarEl.appendChild(hint);\n          var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n          if (card && person.thumb) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) existing.replaceWith(makeImg(person.thumb)); } }\n          showToast(\'大頭照已更新\');\n        }).catch(function (e) { console.warn(\'ms-people: 上傳大頭照失敗\', e); showToast(\'上傳失敗，請稍後再試\'); })\n          .finally(function () { avatarEl.style.opacity = \'\'; });\n      });\n    }\n\n    var deleteBtn = document.getElementById(\'msPplDeleteBtn\'); if (deleteBtn) { deleteBtn.addEventListener(\'click\', function () { if (state.currentPerson) showModal(\'msPplDeleteModal\'); }); }\n    var deleteCancel = document.getElementById(\'msPplDeleteCancel\'); if (deleteCancel) { deleteCancel.addEventListener(\'click\', function () { hideModal(\'msPplDeleteModal\'); }); }\n\n    var deleteConfirm = document.getElementById(\'msPplDeleteConfirm\');\n    if (deleteConfirm) {\n      deleteConfirm.addEventListener(\'click\', function () {\n        var p = state.currentPerson; if (!p) return;\n        deleteConfirm.classList.add(\'ms-ppl-saving\');\n        apiDelete(\'/identity/\' + p.id).then(function () {\n          var ik = knownPeople.findIndex(function (x) { return x.id === p.id; }); if (ik !== -1) knownPeople.splice(ik, 1);\n          var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; }); if (ip !== -1) pendingPeople.splice(ip, 1);\n          var is = skippedPeople.findIndex(function (x) { return x.id === p.id; }); if (is !== -1) skippedPeople.splice(is, 1);\n          clearPersonCache(p); state.currentPerson = null; state.isDirty = false; knownPage = 1; pendingPage = 1;\n          hideModal(\'msPplDeleteModal\'); renderGrid(); showView(\'msPplViewList\');\n        }).catch(function (e) { console.warn(\'ms-people: DELETE identity 失敗\', e); deleteConfirm.classList.remove(\'ms-ppl-saving\'); hideModal(\'msPplDeleteModal\'); alert(\'刪除失敗，請稍後再試\'); });\n      });\n    }\n\n    var dirtyLeaveDiscard = document.getElementById(\'msPplDirtyLeaveDiscard\'); if (dirtyLeaveDiscard) { dirtyLeaveDiscard.addEventListener(\'click\', function () { hideModal(\'msPplDirtyLeaveModal\'); if (_dirtyLeaveCallback && _dirtyLeaveCallback.onLeave) _dirtyLeaveCallback.onLeave(); _dirtyLeaveCallback = null; }); }\n    var dirtyLeaveSave = document.getElementById(\'msPplDirtyLeaveSave\'); if (dirtyLeaveSave) { dirtyLeaveSave.addEventListener(\'click\', function () { if (_dirtyLeaveCallback && _dirtyLeaveCallback.onSave) _dirtyLeaveCallback.onSave(); _dirtyLeaveCallback = null; }); }\n    var dirtyDiscardCancel = document.getElementById(\'msPplDirtyDiscardCancel\'); if (dirtyDiscardCancel) { dirtyDiscardCancel.addEventListener(\'click\', function () { hideModal(\'msPplDirtyDiscardModal\'); _dirtyDiscardCallback = null; }); }\n    var dirtyDiscardOk = document.getElementById(\'msPplDirtyDiscardOk\'); if (dirtyDiscardOk) { dirtyDiscardOk.addEventListener(\'click\', function () { if (_dirtyDiscardCallback) _dirtyDiscardCallback(); _dirtyDiscardCallback = null; }); }\n\n    function closeVideoModal() {\n      var modal = document.getElementById(\'msPplVideoModal\'), videoEl = document.getElementById(\'msPplVideoEl\');\n      if (videoEl) { videoEl.pause(); videoEl.removeAttribute(\'src\'); videoEl.load(); }\n      if (modal) { modal.classList.remove(\'show\'); if (modal._blobUrl) { URL.revokeObjectURL(modal._blobUrl); modal._blobUrl = null; } }\n    }\n    var videoClose = document.getElementById(\'msPplVideoClose\'); if (videoClose) { videoClose.addEventListener(\'click\', closeVideoModal); }\n    var videoModal = document.getElementById(\'msPplVideoModal\'); if (videoModal) { videoModal.addEventListener(\'click\', function (e) { if (e.target === this) closeVideoModal(); }); }\n\n    // ── 待定人臉 ──────────────────────────────────────────────\n    var uboundFaces = [], uboundLoaded = false, uboundPage = 1, UFACE_PAGE = 30, uboundCtxFace = null, uboundAssignTarget = null;\n    var BINDING_STATES = [\'stranger\', \'dangling\', \'unbound\'];\n    var BINDING_LABELS = {\n      stranger: { label: \'Stranger\', color: \'#6b7280\' },\n      dangling: { label: \'Dangling\', color: \'#d97706\' },\n      unbound:  { label: \'Unbound\',  color: \'#9ca3af\' },\n    };\n\n    function loadUnboundFaces(force) {\n      if (uboundLoaded && !force) return;\n      var fileUuidSet = {};\n      knownPeople.concat(pendingPeople).forEach(function (p) { (p.media || []).forEach(function (m) { if (m.file_uuid) fileUuidSet[m.file_uuid] = true; }); });\n      var fileUuids = Object.keys(fileUuidSet);\n      if (!fileUuids.length) {\n        var identities = knownPeople.concat(pendingPeople).slice(0, 20);\n        Promise.all(identities.map(function (p) { return apiFetch(\'/identity/\' + p.id + \'/files\').catch(function () { return null; }); })).then(function (results) {\n          results.forEach(function (body) { if (!body) return; var files = body.data || body.files || []; files.forEach(function (f) { if (f.file_uuid) fileUuidSet[f.file_uuid] = true; }); });\n          fetchUnboundFromFiles(Object.keys(fileUuidSet));\n        });\n        return;\n      }\n      fetchUnboundFromFiles(fileUuids);\n    }\n\n    function fetchUnboundFromFiles(fileUuids) {\n      if (!fileUuids.length) { uboundLoaded = true; renderUnboundGrid(); return; }\n      var fileNameMap = {};\n      apiFetch(\'/files/scan\').then(function (body) {\n        if (body && Array.isArray(body.files)) { body.files.forEach(function (f) { if (f.file_uuid && f.file_name) fileNameMap[f.file_uuid] = f.file_name.replace(/\\.[^.]+$/, \'\'); }); }\n      }).catch(function () {}).then(function () {\n        var PAGE = 200;\n        function fetchOnePage(fileUuid, binding, page) { return apiFetch(\'/file/\' + fileUuid + \'/faces?binding=\' + binding + \'&page=\' + page + \'&page_size=\' + PAGE).catch(function () { return null; }); }\n        var allPromises = [];\n        fileUuids.forEach(function (fileUuid) {\n          BINDING_STATES.forEach(function (binding) {\n            allPromises.push(fetchOnePage(fileUuid, binding, 1).then(function (body) {\n              if (!body || !Array.isArray(body.data)) return [];\n              var faces = body.data.map(function (f) { f._fileUuid = fileUuid; f._bindingState = binding; f.file_uuid = fileUuid; f.file_name = fileNameMap[fileUuid] || null; return f; });\n              var total = body.total || 0, totalPages = Math.ceil(total / PAGE);\n              if (totalPages <= 1) return faces;\n              var remaining = [];\n              for (var p = 2; p <= Math.min(totalPages, 10); p++) remaining.push(fetchOnePage(fileUuid, binding, p));\n              return Promise.all(remaining).then(function (pages) {\n                pages.forEach(function (b) { if (b && Array.isArray(b.data)) { b.data.forEach(function (f) { f._fileUuid = fileUuid; f._bindingState = binding; f.file_uuid = fileUuid; f.file_name = fileNameMap[fileUuid] || null; faces.push(f); }); } });\n                return faces;\n              });\n            }));\n          });\n        });\n        Promise.all(allPromises).then(function (groups) {\n          var seen = {}, result = [];\n          groups.forEach(function (faces) { (faces || []).forEach(function (f) { var key = (f.file_uuid || \'\') + \'|\' + (f.trace_id || f.face_id || f.id || \'\'); if (!seen[key]) { seen[key] = true; result.push(f); } }); });\n          uboundFaces = result; uboundLoaded = true; uboundPage = 1; renderUnboundGrid();\n        }).catch(function (e) { console.warn(\'ms-people: fetchUnboundFromFiles 失敗\', e); });\n      });\n    }\n\n    function getFilteredUnbound() {\n      var q = ((document.getElementById(\'msPplUfaceSearchInput\') || {}).value || \'\').trim().toLowerCase();\n      var list = uboundFaces.slice();\n      if (q) { list = list.filter(function (f) { return (f.file_name || f.file_uuid || \'\').toLowerCase().indexOf(q) !== -1; }); }\n      var sortEl = document.querySelector(\'input[name=\"ms-uface-sort\"]:checked\');\n      var sort = sortEl ? sortEl.value : \'name_az\';\n      if (sort === \'name_az\') { list.sort(function (a, b) { return (a.file_name || a.file_uuid || \'\').toLowerCase().localeCompare((b.file_name || b.file_uuid || \'\').toLowerCase()); }); }\n      else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.file_name || b.file_uuid || \'\').toLowerCase().localeCompare((a.file_name || a.file_uuid || \'\').toLowerCase()); }); }\n      else if (sort === \'time_desc\') { list.sort(function (a, b) { return (b.timestamp_secs || 0) - (a.timestamp_secs || 0); }); }\n      else if (sort === \'time_asc\') { list.sort(function (a, b) { return (a.timestamp_secs || 0) - (b.timestamp_secs || 0); }); }\n      return list;\n    }\n\n    function renderUnboundGrid() {\n      var grid = document.getElementById(\'msPplUfaceGrid\'); if (!grid) return; grid.innerHTML = \'\';\n      var list = getFilteredUnbound();\n      if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (uboundLoaded ? \'沒有符合的人臉\' : \'目前沒有待定人臉\') + \'</div>\'; var pg = document.getElementById(\'msPplUfacePagination\'); if (pg) pg.innerHTML = \'\'; return; }\n      var start = (uboundPage - 1) * UFACE_PAGE, pageList = list.slice(start, start + UFACE_PAGE);\n      pageList.forEach(function (face) { grid.appendChild(makeUnboundCard(face)); });\n      renderPagination(\'msPplUfacePagination\', uboundPage, list.length, function (p) { uboundPage = p; renderUnboundGrid(); grid.scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n      loadUnboundThumbs(pageList);\n    }\n\n    function makeUnboundCard(face) {\n      var card = document.createElement(\'div\'); card.className = \'ms-ppl-face-card\';\n      var _faceKey = face.trace_id != null ? face.trace_id : face.id;\n      card.dataset.faceId = _faceKey != null ? String(_faceKey) : \'\';\n      var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-ppl-face-img-wrap\'; imgWrap.innerHTML = SILHOUETTE_SVG;\n      var bindingState = face._bindingState || \'unbound\';\n      var stateInfo = BINDING_LABELS[bindingState] || BINDING_LABELS[\'unbound\'];\n      var stateBadge = document.createElement(\'div\');\n      stateBadge.style.cssText = \'position:absolute;top:6px;left:6px;background:\' + stateInfo.color + \';color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.03em;z-index:2;opacity:0.85;\';\n      stateBadge.textContent = stateInfo.label; imgWrap.appendChild(stateBadge);\n      card.appendChild(imgWrap);\n      var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-ppl-face-name pending-name\';\n      nameEl.textContent = face.file_name ? face.file_name.split(\'/\').pop().replace(/\\.[^.]+$/, \'\') : (face.file_uuid ? face.file_uuid.slice(0, 8) + \'…\' : \'—\'); card.appendChild(nameEl);\n      if (face.timestamp_secs != null) { var tsEl = document.createElement(\'div\'); tsEl.className = \'ms-uface-file-name\'; tsEl.textContent = formatSecs(Math.round(face.timestamp_secs)); card.appendChild(tsEl); }\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); uboundCtxFace = face;\n        var menu = document.getElementById(\'msPplUfaceCtxMenu\'); if (!menu) return;\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n      return card;\n    }\n\n    function loadUnboundThumbs(faces) {\n      var factories = faces.filter(function (f) { return !f._thumb && !f._thumbLoading && f.file_uuid && f.trace_id; }).map(function (face) {\n        face._thumbLoading = true;\n        return function () {\n          var tid = face.trace_id || face.id;\n          return fetch(API_BASE + \'/file/\' + face.file_uuid + \'/trace/\' + tid + \'/thumbnail\', { headers: { \'X-API-Key\': API_KEY } }).then(function (r) {\n            if (!r.ok) return;\n            return r.blob().then(function (blob) {\n              face._thumb = URL.createObjectURL(blob);\n              var card = document.querySelector(\'.ms-uface-grid .ms-ppl-face-card[data-face-id=\"\' + (face.trace_id != null ? face.trace_id : face.id) + \'\"]\');\n              if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg.ms-silhouette\'); var img = document.createElement(\'img\'); img.src = face._thumb; img.onerror = function () { if (this.parentNode) this.parentNode.innerHTML = SILHOUETTE_SVG; }; if (existing) existing.replaceWith(img); else imgWrap.insertBefore(img, imgWrap.firstChild); } }\n            });\n          }).catch(function () { face._thumbLoading = false; });\n        };\n      });\n      throttledPool(factories, 5);\n    }\n\n    function openUfaceAssignModal(face) {\n      uboundAssignTarget = null;\n      var triggerEl = document.getElementById(\'msUfaceAssignTrigger\');\n      if (triggerEl) { if (face._thumb) { triggerEl.innerHTML = \'\'; var img = document.createElement(\'img\'); img.src = face._thumb; triggerEl.appendChild(img); } else { triggerEl.innerHTML = SILHOUETTE_SVG; } }\n      var searchEl = document.getElementById(\'msUfaceAssignSearch\'); if (searchEl) searchEl.value = \'\';\n      renderUfaceAssignGrid(\'\'); showModal(\'msPplUfaceAssignModal\');\n    }\n\n    function renderUfaceAssignGrid(query) {\n      var grid = document.getElementById(\'msUfaceAssignGrid\'); if (!grid) return; grid.innerHTML = \'\';\n      var list = knownPeople.filter(function (p) { if (!query) return true; return (p.name || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1; }); })\n        .sort(function (a, b) { return (a.name || \'\').localeCompare(b.name || \'\', undefined, { sensitivity: \'base\' }); });\n      if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; return; }\n      var row = document.createElement(\'div\'); row.style.cssText = \'display:flex;flex-wrap:wrap;gap:16px;width:100%;\';\n      list.forEach(function (person) {\n        var card = document.createElement(\'div\'); card.className = \'ms-merge-face-card\' + (uboundAssignTarget === person.id ? \' selected\' : \'\'); card.dataset.personId = person.id;\n        var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-merge-face-img\';\n        if (person.thumb) { var img = document.createElement(\'img\'); img.src = person.thumb; imgWrap.appendChild(img); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n        var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-merge-face-name\'; nameEl.textContent = person.name || \'（未命名）\';\n        card.appendChild(imgWrap); card.appendChild(nameEl);\n        card.addEventListener(\'click\', function () { uboundAssignTarget = person.id; grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) { c.classList.toggle(\'selected\', c.dataset.personId === person.id); }); });\n        row.appendChild(card);\n      });\n      grid.appendChild(row);\n    }\n\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplUfaceCtxMenu\')) { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); } });\n    var ufaceSearch = document.getElementById(\'msPplUfaceSearchInput\'); if (ufaceSearch) { ufaceSearch.addEventListener(\'input\', function () { uboundPage = 1; renderUnboundGrid(); }); }\n\n    var ufaceSortBtn = document.getElementById(\'msPplUfaceSortBtn\'), ufaceSortPanel = document.getElementById(\'msPplUfaceSortPanel\');\n    if (ufaceSortBtn && ufaceSortPanel) {\n      ufaceSortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); ufaceSortPanel.classList.toggle(\'show\'); });\n      document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplUfaceSortPanel\') && !e.target.closest(\'#msPplUfaceSortBtn\')) ufaceSortPanel.classList.remove(\'show\'); });\n    }\n    document.querySelectorAll(\'input[name=\"ms-uface-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { uboundPage = 1; if (ufaceSortPanel) ufaceSortPanel.classList.remove(\'show\'); renderUnboundGrid(); }); });\n\n    var ufaceCtxAssign = document.getElementById(\'msPplUfaceCtxAssign\'); if (ufaceCtxAssign) { ufaceCtxAssign.addEventListener(\'click\', function () { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); if (uboundCtxFace) openUfaceAssignModal(uboundCtxFace); }); }\n    var ufaceCtxNew = document.getElementById(\'msPplUfaceCtxNew\');\n    if (ufaceCtxNew) {\n      ufaceCtxNew.addEventListener(\'click\', function () {\n        var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\');\n        var face = uboundCtxFace; if (!face) return;\n        var fm = { id: face.trace_id || face.id, numeric_id: face.trace_id || face.id, thumb: face._thumb || null, file_uuid: face.file_uuid, trace_id: face.trace_id || face.id, confidence: face.confidence };\n        var newPerson = { id: \'p-new-\' + Date.now(), name: \'\', thumb: fm.thumb, isNew: true, isStarred: false, aliases: [], role: \'\', notes: \'\', addedAt: new Date(), lastViewed: null, face_members: [fm], media: [] };\n        knownPeople.unshift(newPerson); uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== (face.trace_id || face.id); });\n        renderUnboundGrid(); renderKnownGrid(); openDetail(newPerson);\n        setTimeout(function () { var et = document.getElementById(\'msPplEditToggle\'); if (et) et.click(); }, 100);\n      });\n    }\n    var ufaceCtxIgnore = document.getElementById(\'msPplUfaceCtxIgnore\'); if (ufaceCtxIgnore) { ufaceCtxIgnore.addEventListener(\'click\', function () { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); var face = uboundCtxFace; if (!face) return; uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== (face.trace_id || face.id); }); uboundCtxFace = null; renderUnboundGrid(); }); }\n\n    var ufaceAssignSearch = document.getElementById(\'msUfaceAssignSearch\'); if (ufaceAssignSearch) { ufaceAssignSearch.addEventListener(\'input\', function () { renderUfaceAssignGrid(this.value.trim()); }); }\n    var ufaceAssignCancel = document.getElementById(\'msUfaceAssignCancel\'); if (ufaceAssignCancel) { ufaceAssignCancel.addEventListener(\'click\', function () { hideModal(\'msPplUfaceAssignModal\'); uboundAssignTarget = null; uboundCtxFace = null; }); }\n    var ufaceAssignConfirm = document.getElementById(\'msUfaceAssignConfirm\');\n    if (ufaceAssignConfirm) {\n      ufaceAssignConfirm.addEventListener(\'click\', function () {\n        if (!uboundAssignTarget || !uboundCtxFace) return;\n        var face = uboundCtxFace, person = knownPeople.find(function (p) { return p.id === uboundAssignTarget; });\n        if (!person) { person = pendingPeople.find(function (p) { return p.id === uboundAssignTarget; }); } if (!person) return;\n        var tid = face.trace_id != null ? face.trace_id : face.id;\n        apiPost(\'/identity/\' + person.id + \'/bind/trace\', { file_uuid: face.file_uuid, trace_id: tid }).catch(function (e) { console.warn(\'ms-people: bind/trace 失敗\', tid, e); });\n        person.face_members = (person.face_members || []).concat([{ id: tid, numeric_id: tid, thumb: face._thumb || null, file_uuid: face.file_uuid, trace_id: tid, confidence: face.confidence }]);\n        if (!person.thumb && face._thumb) person.thumb = face._thumb; _detailCache[person.id] = false;\n        uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== tid; }); uboundCtxFace = null; uboundAssignTarget = null;\n        hideModal(\'msPplUfaceAssignModal\'); renderUnboundGrid(); renderGrid();\n      });\n    }\n\n    loadUnboundFaces();\n  }\n\n  function init() {\n    if (!document.getElementById(\'msPplUnassignedGrid\')) return;\n    bindEvents(); renderGrid();\n  }\n\n  if (document.readyState === \'loading\') { document.addEventListener(\'DOMContentLoaded\', init); } else { init(); }\n\n})();\n</script>\n\n<!-- =========================================================\n  Momentry People – Frontend UI\n  HTML 結構\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\">待定人物</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\">已略過</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\">待定人臉</button>\n  </div>\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── 已略過區塊 ── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n      <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n        <div class=\"ms-ppl-avatar-upload-hint\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">\n\n    <div style=\"flex:1;min-width:0;\">\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n              <option value=\"en\">English</option>\n              <option value=\"zh-TW\" selected>繁體中文</option>\n              <option value=\"zh-CN\">简体中文</option>\n              <option value=\"ja\">日本語</option>\n              <option value=\"ko\">한국어</option>\n            </select>\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 離開確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- Context Menu：已知人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：待定人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：已略過右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n<!-- Modal: 合併人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 確定合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls playsinline style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n      <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n      <div class=\"ms-video-tl-labels\">\n        <span id=\"msPplVideoTlStart\">0:00</span>\n        <span id=\"msPplVideoTlEnd\">—</span>\n      </div>\n    </div>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-28 13:28:34','2026-05-28 13:28:34','',1359,'https://m5wp.momentry.ddns.net/?p=1755',0,'revision','',0),
(1756,4,'2026-05-28 13:52:24','2026-05-28 13:52:24','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; cursor: pointer; position: relative; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-ppl-media-badge-conf { position: absolute; bottom: 5px; left: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #9aa0a6; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n.ms-silhouette { width: 100%; height: 100%; }\n.ms-media-timeline-wrap { display: none !important; }\n.ms-thumb-bg { position: absolute; inset: 0; background: #d0d0d0; border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }\n.ms-ppl-media-badge { display: none; }\n.ms-thumb-play-hint { display: none; }\n\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }\n.ms-ppl-section-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; font-weight: 500; color: #9aa0a6; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; }\n.ms-ppl-section-toggle-btn::before { content: \'\'; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"] { border-color: #202124; color: #202124; background: #fff; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before { background: #202124; }\n.ms-ppl-section-toggle-btn:hover { border-color: #5f6368; color: #5f6368; }\n</style>\n\n<!-- =========================================================\n  Momentry People – Frontend UI\n  HTML 結構\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\">待定人物</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\">已略過</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\">待定人臉</button>\n  </div>\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── 已略過區塊 ── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n      <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n        <div class=\"ms-ppl-avatar-upload-hint\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">\n\n    <div style=\"flex:1;min-width:0;\">\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n              <option value=\"en\">English</option>\n              <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n              <option value=\"zh-CN\">简体中文</option>\n              <option value=\"ja\">日本語</option>\n              <option value=\"ko\">한국어</option>\n            </select>\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 離開確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- Context Menu：已知人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：待定人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：已略過右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n<!-- Modal: 合併人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 確定合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n      <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n      <div class=\"ms-video-tl-labels\">\n        <span id=\"msPplVideoTlStart\">0:00</span>\n        <span id=\"msPplVideoTlEnd\">—</span>\n      </div>\n    </div>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-28 13:52:24','2026-05-28 13:52:24','',1359,'https://m5wp.momentry.ddns.net/?p=1756',0,'revision','',0),
(1757,4,'2026-05-29 03:20:09','2026-05-29 03:20:09','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; cursor: pointer; position: relative; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-ppl-media-badge-conf { position: absolute; bottom: 5px; left: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #9aa0a6; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n.ms-silhouette { width: 100%; height: 100%; }\n.ms-media-timeline-wrap { display: none !important; }\n.ms-thumb-bg { position: absolute; inset: 0; background: #d0d0d0; border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }\n.ms-ppl-media-badge { display: none; }\n.ms-thumb-play-hint { display: none; }\n\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }\n.ms-ppl-section-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; font-weight: 500; color: #9aa0a6; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; }\n.ms-ppl-section-toggle-btn::before { content: \'\'; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"] { border-color: #202124; color: #202124; background: #fff; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before { background: #202124; }\n.ms-ppl-section-toggle-btn:hover { border-color: #5f6368; color: #5f6368; }\n</style>\n\n<!-- =========================================================\n  Momentry People – Frontend UI\n  HTML 結構\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplHistoryBtn\" title=\"操作記錄\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n         <path d=\"M12 8v4l3 3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n     </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\">待定人物</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\">已略過</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\">待定人臉</button>\n  </div>\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── 已略過區塊 ── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n      <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n        <div class=\"ms-ppl-avatar-upload-hint\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">\n\n    <div style=\"flex:1;min-width:0;\">\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n              <option value=\"en\">English</option>\n              <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n              <option value=\"zh-CN\">简体中文</option>\n              <option value=\"ja\">日本語</option>\n              <option value=\"ko\">한국어</option>\n            </select>\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 離開確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- Context Menu：已知人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxUndoMerge\">撤銷合併</button>\n</div>\n\n<!-- Context Menu：待定人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxUndoMerge\">撤銷合併</button>\n</div>\n\n<!-- Context Menu：已略過右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n<!-- Modal: 合併人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 確定合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 操作記錄 -->\n<div class=\"ms-modal-overlay\" id=\"msPplHistoryModal\">\n  <div class=\"ms-modal ms-modal-merge\" style=\"max-width:560px;\">\n    <div class=\"ms-merge-header\" style=\"margin-bottom:12px;\">\n      <div class=\"ms-merge-header-text\">操作記錄</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div id=\"msPplHistoryList\" style=\"min-height:80px;max-height:50vh;overflow-y:auto;\"></div>\n    <div class=\"ms-merge-footer\" style=\"margin-top:16px;\">\n      <button class=\"ms-fm-btn\" id=\"msPplHistoryClose\">關閉</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 人物合併記錄 -->\n<div class=\"ms-modal-overlay\" id=\"msPplPersonHistoryModal\">\n  <div class=\"ms-modal ms-modal-merge\" style=\"max-width:560px;\">\n    <div class=\"ms-merge-header\" style=\"margin-bottom:12px;\">\n      <div class=\"ms-merge-header-text\" id=\"msPplPersonHistoryTitle\">合併記錄</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div id=\"msPplPersonHistoryList\" style=\"min-height:80px;max-height:50vh;overflow-y:auto;\"></div>\n    <div class=\"ms-merge-footer\" style=\"margin-top:16px;\">\n      <button class=\"ms-fm-btn\" id=\"msPplPersonHistoryClose\">關閉</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n      <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n      <div class=\"ms-video-tl-labels\">\n        <span id=\"msPplVideoTlStart\">0:00</span>\n        <span id=\"msPplVideoTlEnd\">—</span>\n      </div>\n    </div>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-29 03:20:09','2026-05-29 03:20:09','',1359,'https://m5wp.momentry.ddns.net/?p=1757',0,'revision','',0),
(1758,4,'2026-05-29 03:32:44','2026-05-29 03:32:44','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; cursor: pointer; position: relative; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-ppl-media-badge-conf { position: absolute; bottom: 5px; left: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #9aa0a6; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n.ms-silhouette { width: 100%; height: 100%; }\n.ms-media-timeline-wrap { display: none !important; }\n.ms-thumb-bg { position: absolute; inset: 0; background: #d0d0d0; border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }\n.ms-ppl-media-badge { display: none; }\n.ms-thumb-play-hint { display: none; }\n\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }\n.ms-ppl-section-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; font-weight: 500; color: #9aa0a6; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; }\n.ms-ppl-section-toggle-btn::before { content: \'\'; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"] { border-color: #202124; color: #202124; background: #fff; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before { background: #202124; }\n.ms-ppl-section-toggle-btn:hover { border-color: #5f6368; color: #5f6368; }\n</style>\n\n<!-- =========================================================\n  Momentry People – Frontend UI\n  HTML 結構\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplHistoryBtn\" title=\"操作記錄\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n         <path d=\"M12 8v4l3 3\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"/>\n          <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"/>\n      </svg>\n     </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\">待定人物</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\">已略過</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\">待定人臉</button>\n  </div>\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── 已略過區塊 ── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n      <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n        <div class=\"ms-ppl-avatar-upload-hint\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">\n\n    <div style=\"flex:1;min-width:0;\">\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n              <option value=\"en\">English</option>\n              <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n              <option value=\"zh-CN\">简体中文</option>\n              <option value=\"ja\">日本語</option>\n              <option value=\"ko\">한국어</option>\n            </select>\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 離開確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- Context Menu：已知人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：待定人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：已略過右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n<!-- Modal: 合併人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 確定合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 操作記錄 -->\n<div class=\"ms-modal-overlay\" id=\"msPplHistoryModal\">\n  <div class=\"ms-modal ms-modal-merge\" style=\"max-width:560px;\">\n    <div class=\"ms-merge-header\" style=\"margin-bottom:12px;\">\n      <div class=\"ms-merge-header-text\">操作記錄</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\" style=\"margin-bottom:16px;\">\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n    <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n    <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n  </svg>\n  <input type=\"text\" class=\"ms-merge-search-input\" id=\"msPplHistorySearch\" placeholder=\"搜尋人物名稱\">\n</div>\n    <div id=\"msPplHistoryList\" style=\"min-height:80px;max-height:50vh;overflow-y:auto;\"></div>\n    <div class=\"ms-merge-footer\" style=\"margin-top:16px;\">\n      <button class=\"ms-fm-btn\" id=\"msPplHistoryClose\">關閉</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 人物合併記錄 -->\n<div class=\"ms-modal-overlay\" id=\"msPplPersonHistoryModal\">\n  <div class=\"ms-modal ms-modal-merge\" style=\"max-width:560px;\">\n    <div class=\"ms-merge-header\" style=\"margin-bottom:12px;\">\n      <div class=\"ms-merge-header-text\" id=\"msPplPersonHistoryTitle\">合併記錄</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div id=\"msPplPersonHistoryList\" style=\"min-height:80px;max-height:50vh;overflow-y:auto;\"></div>\n    <div class=\"ms-merge-footer\" style=\"margin-top:16px;\">\n      <button class=\"ms-fm-btn\" id=\"msPplPersonHistoryClose\">關閉</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n      <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n      <div class=\"ms-video-tl-labels\">\n        <span id=\"msPplVideoTlStart\">0:00</span>\n        <span id=\"msPplVideoTlEnd\">—</span>\n      </div>\n    </div>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-29 03:32:44','2026-05-29 03:32:44','',1359,'https://m5wp.momentry.ddns.net/?p=1758',0,'revision','',0),
(1759,4,'2026-05-29 03:38:33','2026-05-29 03:38:33','<!-- wp:html -->\n<style data-wp-block-html=\"css\">\n@import url(\'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap\');\n\n#msPplViewList, #msPplViewDetail {\n  font-family: \'DM Sans\', \'Noto Sans TC\', -apple-system, sans-serif;\n  font-size: 14px; color: #202124; position: relative;\n}\n#msPplViewList { padding-top: 6px; }\n\n.ms-fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #202124; cursor: pointer; outline: none; white-space: nowrap; transition: background .15s; }\n.ms-fm-btn:hover { background: #f3f4f6; }\n.ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }\n.ms-fm-btn-primary:hover { background: #3c4043; }\n.ms-fm-btn-blue { background: #1a56db; color: #fff; border-color: #1a56db; }\n.ms-fm-btn-blue:hover { background: #1648c0; }\n.ms-fm-btn-danger { background: #d93025; color: #fff; border-color: #d93025; }\n.ms-fm-btn-danger:hover { background: #b52a20; }\n\n.ms-fm-icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #d1d5db; background: #fff; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-fm-icon-btn:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ppl-star-toggle-btn { border-color: #d1d5db; font-weight: 500; }\n.ms-ppl-star-toggle-btn .ms-ppl-star-icon { color: #f59e0b; font-size: 14px; }\n.ms-ppl-star-toggle-btn.active { background: #fffbeb; border-color: #f59e0b; color: #92400e; }\n\n.ms-fm-sort-panel { display: none; position: absolute; right: 0; top: 44px; background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: 1px solid #e8eaed; padding: 14px 18px; z-index: 200; min-width: 160px; }\n.ms-fm-sort-panel.show { display: block; }\n.ms-fm-sort-section { padding: 4px 0; }\n.ms-fm-sort-title { font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }\n.ms-radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 13px; color: #3c4043; }\n.ms-radio-label input { accent-color: #202124; cursor: pointer; }\n\n.ms-ppl-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid #d1d5db; border-radius: 10px; padding: 7px 12px; background: #fff; min-width: 200px; transition: border-color .15s; }\n.ms-ppl-search-wrap:focus-within { border-color: #202124; }\n.ms-ppl-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-ppl-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-ppl-search-input::placeholder { color: #bdc1c6; }\n\n.ms-ppl-view { display: none; }\n.ms-ppl-view.active { display: block; }\n.ms-ppl-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; position: relative; overflow: visible; }\n.ms-ppl-section-title { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 14px; font-weight: 600; color: #202124; margin: 0 0 20px; display: flex; align-items: center; gap: 6px; }\n.ms-ppl-hr { border: none; border-top: 1.5px solid #e8eaed; margin: 32px 0 24px; }\n\n.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 20px; }\n.ms-ppl-face-card { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative; }\n.ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; overflow: hidden; background: #f0f0f0; transition: transform .15s, box-shadow .15s; flex-shrink: 0; position: relative; }\n.ms-ppl-face-card:hover .ms-ppl-face-img-wrap { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }\n.ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-face-img-wrap svg { width: 100%; height: 100%; }\n.ms-ppl-card-star { position: absolute; top: 6px; left: 6px; font-size: 16px; color: #f59e0b; text-shadow: 0 1px 3px rgba(0,0,0,.25); display: none; }\n.ms-ppl-face-card.starred .ms-ppl-card-star { display: block; }\n.ms-ppl-face-new { position: absolute; top: 6px; left: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .03em; z-index: 1; }\n.ms-ppl-face-name { font-size: 11.5px; font-weight: 500; color: #3c4043; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }\n.ms-ppl-face-name.pending-name { color: #9aa0a6; font-style: italic; }\n\n.ms-ppl-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; margin-top: 20px; }\n.ms-ppl-edit-text-btn { display: inline-flex; align-items: center; border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; font-weight: 500; color: #5f6368; cursor: pointer; outline: none; padding: 4px 0; transition: color .15s; }\n.ms-ppl-edit-text-btn:hover { color: #202124; }\n.ms-ppl-delete-zone { margin-top: 48px; padding-bottom: 32px; }\n.ms-ppl-delete-hr { border: none; border-top: 1.5px solid #f3f4f6; margin: 0 0 20px; }\n.ms-ppl-delete-zone-btn { color: #d93025; border-color: #fecaca; background: #fff; }\n.ms-ppl-delete-zone-btn:hover { background: #fef2f2; border-color: #d93025; }\n.ms-ppl-detail-header { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 28px; position: relative; margin-top: 20px; }\n.ms-ppl-detail-avatar { width: 120px; height: 120px; border-radius: 20px; background: #e0e0e0; flex-shrink: 0; overflow: visible; cursor: pointer; position: relative; }\n.ms-ppl-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }\n.ms-ppl-avatar-upload-hint { position: absolute; inset: 0; border-radius: 20px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }\n.ms-ppl-detail-avatar:hover .ms-ppl-avatar-upload-hint { opacity: 1; }\n.ms-ppl-avatar-upload-hint svg { color: #fff; }\n.ms-ppl-detail-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }\n.ms-ppl-star-btn { font-size: 20px; background: transparent; border: none; cursor: pointer; outline: none; line-height: 1; color: #d1d5db; transition: color .15s; padding: 0; flex-shrink: 0; }\n.ms-ppl-star-btn.starred { color: #f59e0b; }\n.ms-ppl-add-tag-btn { border: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #9aa0a6; cursor: pointer; outline: none; padding: 0; transition: color .15s; }\n.ms-ppl-add-tag-btn:hover { color: #202124; }\n.ms-ppl-detail-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }\n.ms-ppl-alias-chip { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #5f6368; }\n.ms-ppl-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }\n.ms-ppl-edit-name-row { margin-bottom: 8px; }\n.ms-ppl-edit-name-input { font-size: 16px !important; font-weight: 700 !important; flex: 1; min-width: 160px; }\n.ms-ppl-edit-alias-row { padding-left: 32px; margin-bottom: 16px; gap: 6px; align-items: center; }\n.ms-ppl-alias-wrap-inner { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.ms-ppl-alias-inline-wrap { display: flex; align-items: center; }\n.ms-ppl-alias-inline-input { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 12px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12.5px; color: #202124; outline: none; background: #fff; min-width: 140px; transition: border-color .15s; }\n.ms-ppl-alias-inline-input:focus { border-color: #1a56db; }\n.ms-ppl-edit-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }\n.ms-ppl-edit-field-row { display: flex; align-items: center; gap: 12px; }\n.ms-ppl-edit-field-row--top { align-items: flex-start; }\n.ms-ppl-edit-label { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; font-weight: 700; color: #202124; letter-spacing: .03em; min-width: 30px; text-align: right; flex-shrink: 0; padding-top: 2px; }\n.ms-ppl-edit-field-input { flex: 1; min-width: 0; }\n.ms-ppl-edit-actions { display: flex; gap: 8px; padding-left: 42px; }\n.ms-ppl-view-box { font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; min-height: 24px; display: flex; align-items: center; word-break: break-word; padding: 2px 0; }\n.ms-ppl-view-name-box { font-size: 20px; font-weight: 700; flex: 1; min-width: 0; }\n.ms-ppl-view-name-box.placeholder { color: #bdc1c6; }\n.ms-ppl-view-field-box { flex: 1; min-width: 0; color: #3c4043; }\n.ms-ppl-view-notes-box { flex: 1; min-width: 0; min-height: 24px; align-items: flex-start; color: #9aa0a6; font-size: 13px; white-space: pre-wrap; }\n.ms-ppl-edit-input { border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13.5px; color: #202124; outline: none; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; min-width: 0; box-sizing: border-box; width: 100%; }\n.ms-ppl-edit-input:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-edit-textarea { width: 100%; border: 1.5px solid #e8eaed; border-radius: 12px; padding: 9px 14px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; outline: none; resize: vertical; min-height: 72px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }\n.ms-ppl-edit-textarea:focus { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.1); }\n.ms-ppl-alias-tag { display: inline-flex; align-items: center; gap: 5px; background: #e8eaed; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; color: #202124; }\n.ms-ppl-alias-tag button { border: none; background: transparent; cursor: pointer; color: #5f6368; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; }\n.ms-ppl-alias-add-btn { border: 1.5px dashed #bbb; background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; color: #5f6368; cursor: pointer; outline: none; }\n.ms-ppl-alias-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-alias-locale-select { border: 1.5px solid #1a56db; border-radius: 999px; padding: 4px 10px; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 12px; color: #202124; background: #fff; outline: none; cursor: pointer; height: 30px; }\n\n.ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }\n.ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }\n.ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }\n.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }\n.ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }\n.ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }\n.ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-ppl-strip-face:hover .ms-ppl-strip-face-img { border-color: #202124; }\n.ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }\n.ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }\n.ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }\n\n.ms-ctx-menu { display: none; position: fixed; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); border: 1px solid #e8eaed; padding: 6px; z-index: 9999; min-width: 140px; }\n.ms-ctx-menu.show { display: block; }\n.ms-ctx-item { display: block; width: 100%; text-align: left; padding: 9px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; transition: background .12s; }\n.ms-ctx-item:hover { background: #f3f4f6; }\n.ms-ctx-danger { color: #d93025; }\n.ms-ctx-danger:hover { background: #fce8e6; }\n\n.ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }\n.ms-ppl-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px; }\n.ms-ppl-media-item { border-radius: 12px; overflow: visible; background: #f0f0f0; cursor: pointer; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }\n.ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }\n.ms-ppl-media-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; background: #e8eaed; border-radius: 12px 12px 0 0; cursor: pointer; }\n.ms-ppl-media-dur { position: absolute; bottom: 5px; right: 7px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px; }\n.ms-ppl-media-info { padding: 8px 10px 10px; background: #fff; }\n.ms-ppl-media-title { font-size: 12px; font-weight: 600; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }\n.ms-ppl-media-sub { font-size: 10.5px; color: #9aa0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-ppl-media-badge-conf { position: absolute; bottom: 5px; left: 6px; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .04em; }\n\n.ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; place-items: center; }\n.ms-modal-overlay.show { display: grid; }\n.ms-modal { background: #fff; border-radius: 20px; padding: 30px 34px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); text-align: center; }\n.ms-modal-title { font-size: 16px; font-weight: 700; color: #202124; margin-bottom: 8px; }\n.ms-modal-sub { font-size: 13px; color: #5f6368; margin-bottom: 22px; }\n.ms-modal-actions { display: flex; gap: 10px; justify-content: center; }\n.ms-modal-merge { max-width: 640px; width: 92%; padding: 32px 36px; text-align: left; max-height: 85vh; overflow-y: auto; margin-top: 48px; align-self: flex-start; }\n.ms-merge-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }\n.ms-merge-trigger-face { width: 72px; height: 72px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }\n.ms-merge-trigger-face img { width: 100%; height: 100%; object-fit: cover; }\n.ms-merge-header-text { font-size: 16px; font-weight: 600; color: #202124; }\n.ms-merge-divider { border: none; border-top: 1px solid #e8eaed; margin: 0 0 18px; }\n.ms-merge-search-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 10px 14px; margin-bottom: 20px; transition: border-color .15s; }\n.ms-merge-search-wrap:focus-within { border-color: #202124; }\n.ms-merge-search-icon { color: #9aa0a6; flex-shrink: 0; }\n.ms-merge-search-input { border: none; outline: none; background: transparent; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; color: #202124; width: 100%; }\n.ms-merge-search-input::placeholder { color: #bdc1c6; }\n.ms-merge-grid { display: flex; flex-direction: column; min-height: 120px; margin-bottom: 28px; max-height: 45vh; overflow-y: auto; }\n.ms-merge-face-card { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }\n.ms-merge-face-img { width: 80px; height: 80px; border-radius: 16px; overflow: hidden; background: #e8eaed; border: 2.5px solid transparent; transition: border-color .15s, box-shadow .15s; }\n.ms-merge-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.ms-merge-face-card:hover .ms-merge-face-img { border-color: #1a56db; }\n.ms-merge-face-card.selected .ms-merge-face-img { border-color: #1a56db; box-shadow: 0 0 0 3px rgba(26,86,219,.18); }\n.ms-merge-face-name { font-size: 12px; color: #3c4043; text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }\n\n.ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }\n.ms-modal-video-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }\n.ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; }\n.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }\n.ms-modal-video-close:hover { color: #fff; }\n.ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }\n.ms-video-seg-info { font-size: 12px; color: #9aa0a6; flex: 1; text-align: center; line-height: 1.4; }\n.ms-video-nav .ms-fm-btn { background: #2c2c2c; border-color: #3c3c3c; color: #e8eaed; }\n.ms-video-nav .ms-fm-btn:hover { background: #3c3c3c; }\n.ms-video-nav .ms-fm-btn[disabled] { opacity: 0.35; pointer-events: none; }\n.ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }\n.ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n\n.ms-video-timeline-wrap { padding: 14px 0 6px; }\n.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }\n.ms-video-tl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #9aa0a6; cursor: pointer; transition: width .12s, height .12s, background .12s; z-index: 2; }\n.ms-video-tl-dot:hover { width: 12px; height: 12px; background: #fff; }\n.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }\n.ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }\n.ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }\n.ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }\n\n.ms-ppl-saving { opacity: .6; pointer-events: none; }\n#msPplKnownPagination, #msPplPendingPagination { margin-top: 24px; }\n.ms-silhouette { width: 100%; height: 100%; }\n.ms-media-timeline-wrap { display: none !important; }\n.ms-thumb-bg { position: absolute; inset: 0; background: #d0d0d0; border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.18); border-radius: 12px 12px 0 0; }\n.ms-thumb-play-circle svg { width: 38px; height: 38px; opacity: .7; transition: opacity .15s, transform .15s; }\n.ms-ppl-media-thumb:hover .ms-thumb-play-circle svg { opacity: 1; transform: scale(1.08); }\n.ms-ppl-media-badge { display: none; }\n.ms-thumb-play-hint { display: none; }\n\n.ms-uface-grid .ms-ppl-face-card { width: 120px; }\n.ms-uface-grid .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; }\n.ms-uface-conf-badge { display: none; }\n.ms-uface-file-name { font-size: 10px; color: #9aa0a6; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; margin-top: -4px; }\n\n.ms-ppl-card-skipped .ms-ppl-face-img-wrap { filter: grayscale(0.6); opacity: 0.7; }\n.ms-ppl-card-skipped .ms-ppl-face-name { color: #bdc1c6; }\n\n.ms-ppl-section-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: nowrap; }\n.ms-ppl-section-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid #d1d5db; background: #fff; font-family: \'DM Sans\', \'Noto Sans TC\', sans-serif; font-size: 13px; font-weight: 500; color: #9aa0a6; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; }\n.ms-ppl-section-toggle-btn::before { content: \'\'; width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; transition: background .15s; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"] { border-color: #202124; color: #202124; background: #fff; }\n.ms-ppl-section-toggle-btn[data-active=\"true\"]::before { background: #202124; }\n.ms-ppl-section-toggle-btn:hover { border-color: #5f6368; color: #5f6368; }\n</style>\n\n<!-- =========================================================\n  Momentry People – Frontend UI\n  HTML 結構\n  ========================================================= -->\n\n<!-- ── View A：已知人物 / 重要人物 ── -->\n<div id=\"msPplViewList\" class=\"ms-ppl-view active\">\n\n  <div class=\"ms-ppl-toolbar\">\n    <button class=\"ms-fm-btn ms-ppl-star-toggle-btn\" id=\"msPplStarToggleBtn\">\n      <span class=\"ms-ppl-star-icon\">★</span>\n      <span id=\"msPplStarToggleLabel\">查看重要人物</span>\n    </button>\n\n    <button class=\"ms-fm-icon-btn\" id=\"msPplRefreshBtn\" title=\"重新整理\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div style=\"flex:1;\"></div>\n\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplTogglePending\" data-active=\"true\">待定人物</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleSkipped\" data-active=\"false\">已略過</button>\n    <button class=\"ms-ppl-section-toggle-btn\" id=\"msPplToggleUface\" data-active=\"true\">待定人臉</button>\n  </div>\n\n  <div class=\"ms-ppl-section-toolbar\" id=\"msPplKnownToolbar\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplSectionTitle\" style=\"margin:0;\">已知人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplSearchInput\" placeholder=\"搜尋已知人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"recent\" checked=\"\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_az\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-ppl-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-face-grid\" id=\"msPplUnassignedGrid\"></div>\n  <div id=\"msPplKnownPagination\"></div>\n\n  <hr class=\"ms-ppl-hr\">\n\n  <div class=\"ms-ppl-toolbar\" id=\"msPplPendingToolbar\" style=\"margin-bottom:16px;\">\n    <div class=\"ms-ppl-section-title\" id=\"msPplPendingTitle\" style=\"margin:0;\">待定人物：</div>\n    <div style=\"flex:1;\"></div>\n    <div class=\"ms-ppl-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplPendingSearchInput\" placeholder=\"搜尋待定人物\">\n    </div>\n    <div style=\"position:relative;\">\n      <button class=\"ms-fm-icon-btn\" id=\"msPplPendingSortBtn\" title=\"排序\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n      <div class=\"ms-fm-sort-panel\" id=\"msPplPendingSortPanel\">\n        <div class=\"ms-fm-sort-section\">\n          <div class=\"ms-fm-sort-title\">排序方式</div>\n          <div style=\"display:flex;flex-direction:column;gap:8px;\">\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"recent\"> 最近瀏覽</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n            <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-pending-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplPendingGrid\"></div>\n  <div id=\"msPplPendingPagination\"></div>\n\n</div>\n\n<!-- ── 已略過區塊 ── -->\n<div id=\"msPplSkippedSection\" style=\"display:none;\">\n  <hr class=\"ms-ppl-hr\">\n  <div class=\"ms-ppl-section-title\" style=\"color:#9aa0a6;\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink:0;\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M15 9l-6 6M9 9l6 6\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    已略過：\n  </div>\n  <div class=\"ms-ppl-face-grid\" id=\"msPplSkippedGrid\"></div>\n  <div id=\"msPplSkippedPagination\"></div>\n</div>\n\n<!-- ── View B：人物詳情 ── -->\n<div id=\"msPplViewDetail\" class=\"ms-ppl-view\">\n  <div class=\"ms-ppl-topbar\">\n    <button class=\"ms-fm-btn\" id=\"msPplBackBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      返回\n    </button>\n    <button class=\"ms-ppl-edit-text-btn\" id=\"msPplEditToggle\">編輯\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\">\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"ms-ppl-detail-header\">\n    <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;\">\n      <div class=\"ms-ppl-detail-avatar\" id=\"msPplAvatar\">\n        <div class=\"ms-ppl-avatar-upload-hint\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            <circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n          </svg>\n        </div>\n      </div>\n    </div>\n    <input type=\"file\" id=\"msPplAvatarInput\" accept=\"image/jpeg,image/png\" style=\"display:none;\">\n\n    <div style=\"flex:1;min-width:0;\">\n      <div id=\"msPplInfoView\">\n        <div class=\"ms-ppl-detail-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtn\" title=\"標為重要人物\">☆</button>\n          <div class=\"ms-ppl-view-box ms-ppl-view-name-box\" id=\"msPplDetailName\">—</div>\n          <button class=\"ms-ppl-add-tag-btn\" id=\"msPplAddTagBtn\">新增標籤</button>\n        </div>\n        <div class=\"ms-ppl-detail-aliases\" id=\"msPplDetailAliases\"></div>\n        <div class=\"ms-ppl-edit-fields\" style=\"margin-top:4px;\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <span class=\"ms-ppl-edit-label\">角色</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-field-box\" id=\"msPplDetailRole\">—</div>\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <span class=\"ms-ppl-edit-label\">描述</span>\n            <div class=\"ms-ppl-view-box ms-ppl-view-notes-box\" id=\"msPplDetailNotes\">—</div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"msPplInfoEdit\" style=\"display:none;\">\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-name-row\">\n          <button class=\"ms-ppl-star-btn\" id=\"msPplStarBtnEdit\" title=\"標為重要人物\">☆</button>\n          <input class=\"ms-ppl-edit-input ms-ppl-edit-name-input\" id=\"msPplEditName\" placeholder=\"加入人名\">\n        </div>\n        <div class=\"ms-ppl-edit-row ms-ppl-edit-alias-row\">\n          <div id=\"msPplAliasWrap\" class=\"ms-ppl-alias-wrap-inner\"></div>\n          <div class=\"ms-ppl-alias-inline-wrap\" id=\"msPplAliasInlineWrap\" style=\"display:none;\">\n            <select class=\"ms-ppl-alias-locale-select\" id=\"msPplAliasLocaleSelect\" tabindex=\"0\">\n              <option value=\"en\">English</option>\n              <option value=\"zh-TW\" selected=\"\">繁體中文</option>\n              <option value=\"zh-CN\">简体中文</option>\n              <option value=\"ja\">日本語</option>\n              <option value=\"ko\">한국어</option>\n            </select>\n            <input class=\"ms-ppl-alias-inline-input\" id=\"msPplAliasInlineInput\" placeholder=\"輸入別名後按 Enter\" style=\"margin-left:6px;\">\n          </div>\n          <button class=\"ms-ppl-alias-add-btn\" id=\"msPplAddAlias\">＋ 別名</button>\n        </div>\n        <div class=\"ms-ppl-edit-fields\">\n          <div class=\"ms-ppl-edit-field-row\">\n            <label class=\"ms-ppl-edit-label\">角色</label>\n            <input class=\"ms-ppl-edit-input ms-ppl-edit-field-input\" id=\"msPplEditRole\" placeholder=\"角色名稱\">\n          </div>\n          <div class=\"ms-ppl-edit-field-row ms-ppl-edit-field-row--top\">\n            <label class=\"ms-ppl-edit-label\">描述</label>\n            <textarea class=\"ms-ppl-edit-textarea ms-ppl-edit-field-input\" id=\"msPplEditNotes\" placeholder=\"自訂描述\"></textarea>\n          </div>\n        </div>\n        <div class=\"ms-ppl-edit-actions\">\n          <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplSaveBtn\">儲存更改</button>\n          <button class=\"ms-fm-btn\" id=\"msPplCancelBtn\">取消</button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-ppl-strip-wrap\">\n    <button class=\"ms-ppl-strip-add-btn\" id=\"msPplStripAddBtn\" title=\"加入相同人物\">＋</button>\n    <div class=\"ms-ppl-face-strip\" id=\"msPplFaceStrip\"></div>\n    <button class=\"ms-ppl-strip-arrow\" id=\"msPplStripNext\" title=\"更多\">›</button>\n  </div>\n\n  <div class=\"ms-ppl-media-label\" id=\"msPplMediaLabel\"></div>\n  <div class=\"ms-ppl-media-grid\" id=\"msPplMediaGrid\"></div>\n\n  <div class=\"ms-ppl-delete-zone\">\n    <hr class=\"ms-ppl-delete-hr\">\n    <button class=\"ms-fm-btn ms-ppl-delete-zone-btn\" id=\"msPplDeleteBtn\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <polyline points=\"3 6 5 6 21 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></polyline>\n        <path d=\"M19 6l-1 14H6L5 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M10 11v6M14 11v6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path>\n      </svg>\n      刪除此人物\n    </button>\n  </div>\n\n  <div class=\"ms-ctx-menu\" id=\"msPplCtxMenu\">\n    <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCtxNotThis\">不是此人物</button>\n    <button class=\"ms-ctx-item\" id=\"msPplCtxSplit\">另建人物</button>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplRemoveModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要將這個人臉從此人物移除嗎？</div>\n      <div class=\"ms-modal-sub\">此人臉將移至「待定人物」，您可從人物管理重新分類</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplRemoveCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplRemoveConfirm\">確定移除</button>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ms-modal-overlay\" id=\"msPplDeleteModal\">\n    <div class=\"ms-modal\">\n      <div class=\"ms-modal-title\">確定要刪除此人物嗎？</div>\n      <div class=\"ms-modal-sub\">刪除後無法復原，此人物的所有資料將永久移除</div>\n      <div class=\"ms-modal-actions\">\n        <button class=\"ms-fm-btn\" id=\"msPplDeleteCancel\">取消</button>\n        <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDeleteConfirm\">確定刪除</button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 離開確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyLeaveModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Save before leaving?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyLeaveDiscard\">Leave anyway</button>\n      <button class=\"ms-fm-btn ms-fm-btn-primary\" id=\"msPplDirtyLeaveSave\">Save</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── Modal: 放棄編輯確認 ── -->\n<div class=\"ms-modal-overlay\" id=\"msPplDirtyDiscardModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">You have unsaved changes.</div>\n    <div class=\"ms-modal-sub\">Discard them?</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplDirtyDiscardCancel\">Keep editing</button>\n      <button class=\"ms-fm-btn ms-fm-btn-danger\" id=\"msPplDirtyDiscardOk\">Discard</button>\n    </div>\n  </div>\n</div>\n\n<!-- ── 待定人臉區域 ── -->\n<hr class=\"ms-ppl-hr\" id=\"msPplUnboundHr\">\n<div class=\"ms-ppl-toolbar\" id=\"msPplUfaceFilterbar\">\n  <div class=\"ms-ppl-section-title\" id=\"msPplUnboundTitle\" style=\"margin:0;\">待定人臉：</div>\n  <div style=\"flex:1;\"></div>\n  <div class=\"ms-ppl-search-wrap\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-ppl-search-icon\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n      <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n    </svg>\n    <input type=\"text\" class=\"ms-ppl-search-input\" id=\"msPplUfaceSearchInput\" placeholder=\"搜尋人臉名稱\">\n  </div>\n  <div style=\"position:relative;\">\n    <button class=\"ms-fm-icon-btn\" id=\"msPplUfaceSortBtn\" title=\"排序\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M4 6h16M7 12h10M10 18h4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n    </button>\n    <div class=\"ms-fm-sort-panel\" id=\"msPplUfaceSortPanel\">\n      <div class=\"ms-fm-sort-section\">\n        <div class=\"ms-fm-sort-title\">排序方式</div>\n        <div style=\"display:flex;flex-direction:column;gap:8px;\">\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"recent\"> 最近瀏覽</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_az\" checked=\"\"> 依檔名・由 A 到 Z</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"name_za\"> 依檔名・由 Z 到 A</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_desc\"> 依時間・由近到遠</label>\n          <label class=\"ms-radio-label\"><input type=\"radio\" name=\"ms-uface-sort\" value=\"time_asc\"> 依時間・由遠到近</label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"ms-ppl-face-grid ms-uface-grid\" id=\"msPplUfaceGrid\"></div>\n<div id=\"msPplUfacePagination\"></div>\n\n<!-- Context menu：待定人臉右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplUfaceCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxAssign\">指定到現有人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplUfaceCtxNew\">建立新人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplUfaceCtxIgnore\">略過此人臉</button>\n</div>\n\n<!-- Modal：指定人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplUfaceAssignModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msUfaceAssignTrigger\"></div>\n      <div class=\"ms-merge-header-text\">選擇要指定的人物</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msUfaceAssignSearch\" placeholder=\"搜尋人物名稱\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msUfaceAssignGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msUfaceAssignCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msUfaceAssignConfirm\">確定指定</button>\n    </div>\n  </div>\n</div>\n\n<!-- Context Menu：已知人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplCardCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplCardCtxToPending\">移至待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplCardCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：待定人物右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplPendingCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxStar\">標為重要人物</button>\n  <hr style=\"border:none;border-top:1px solid #e8eaed;margin:4px 0;\">\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxConfirm\">確認此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxMerge\">已有此人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplPendingCtxPromote\">另建人物</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplPendingCtxSkip\">略過此人物</button>\n</div>\n\n<!-- Context Menu：已略過右鍵 -->\n<div class=\"ms-ctx-menu\" id=\"msPplSkippedCtxMenu\">\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxConfirm\">恢復為已知人物</button>\n  <button class=\"ms-ctx-item\" id=\"msPplSkippedCtxToPending\">恢復為待定</button>\n  <button class=\"ms-ctx-item ms-ctx-danger\" id=\"msPplSkippedCtxDelete\">刪除此人物</button>\n</div>\n\n<!-- Modal: 合併人物 -->\n<div class=\"ms-modal-overlay\" id=\"msPplMergeModal\">\n  <div class=\"ms-modal ms-modal-merge\">\n    <div class=\"ms-merge-header\">\n      <div class=\"ms-merge-trigger-face\" id=\"msMergeTriggerFace\"></div>\n      <div class=\"ms-merge-header-text\">請選擇相同人物進行合併</div>\n    </div>\n    <hr class=\"ms-merge-divider\">\n    <div class=\"ms-merge-search-wrap\">\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"ms-merge-search-icon\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle>\n        <path d=\"M16.5 16.5L21 21\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path>\n      </svg>\n      <input type=\"text\" class=\"ms-merge-search-input\" id=\"msMergeSearchInput\" placeholder=\"快速搜尋已建立之人物名稱或關鍵字\">\n    </div>\n    <div class=\"ms-merge-grid\" id=\"msMergeGrid\"></div>\n    <div class=\"ms-merge-footer\">\n      <button class=\"ms-fm-btn\" id=\"msMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msMergeConfirm\">完成</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 確定合併 -->\n<div class=\"ms-modal-overlay\" id=\"msPplConfirmMergeModal\">\n  <div class=\"ms-modal\">\n    <div class=\"ms-modal-title\">確定要合併這兩個人物嗎？</div>\n    <div class=\"ms-modal-sub\">您仍可以從人物管理修改</div>\n    <div class=\"ms-modal-actions\">\n      <button class=\"ms-fm-btn\" id=\"msPplConfirmMergeCancel\">取消</button>\n      <button class=\"ms-fm-btn ms-fm-btn-blue\" id=\"msPplConfirmMergeOk\">確定合併</button>\n    </div>\n  </div>\n</div>\n\n<!-- Modal: 影片播放 -->\n<div class=\"ms-modal-overlay\" id=\"msPplVideoModal\" style=\"z-index:99999;\">\n  <div class=\"ms-modal ms-modal-video\">\n    <div class=\"ms-modal-video-header\">\n      <span class=\"ms-modal-video-title\" id=\"msPplVideoTitle\">影片片段</span>\n      <button class=\"ms-modal-video-close\" id=\"msPplVideoClose\">✕</button>\n    </div>\n    <div class=\"ms-video-loading\" id=\"msPplVideoLoading\" style=\"display:none;\">\n      <div class=\"ms-video-loading-spinner\"></div>\n      <span>載入中…</span>\n    </div>\n    <video id=\"msPplVideoEl\" controls=\"\" playsinline=\"\" style=\"width:100%;border-radius:10px;background:#000;max-height:60vh;\"></video>\n    <div class=\"ms-video-timeline-wrap\" id=\"msPplVideoTimeline\" style=\"display:none;\">\n      <div class=\"ms-video-tl-bar\" id=\"msPplVideoTlBar\"></div>\n      <div class=\"ms-video-tl-labels\">\n        <span id=\"msPplVideoTlStart\">0:00</span>\n        <span id=\"msPplVideoTlEnd\">—</span>\n      </div>\n    </div>\n    <div class=\"ms-video-nav\">\n      <button class=\"ms-fm-btn\" id=\"msPplVideoPrev\">‹ 上一段</button>\n      <span class=\"ms-video-seg-info\" id=\"msPplVideoSegInfo\"></span>\n      <button class=\"ms-fm-btn\" id=\"msPplVideoNext\">下一段 ›</button>\n    </div>\n  </div>\n</div>\n<!-- /wp:html -->','People','','inherit','closed','closed','','1359-revision-v1','','','2026-05-29 03:38:33','2026-05-29 03:38:33','',1359,'https://m5wp.momentry.ddns.net/?p=1759',0,'revision','',0),
(1760,4,'2026-05-29 06:31:52','0000-00-00 00:00:00','','Auto Draft','','auto-draft','open','open','','','','','2026-05-29 06:31:52','0000-00-00 00:00:00','',0,'https://m5wp.momentry.ddns.net/?p=1760',0,'post','',0);
/*!40000 ALTER TABLE `wp_posts` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_snippets`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_snippets` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` tinytext NOT NULL,
  `description` text NOT NULL,
  `code` longtext NOT NULL,
  `tags` longtext NOT NULL,
  `scope` varchar(15) NOT NULL DEFAULT 'global',
  `condition_id` bigint(20) NOT NULL DEFAULT 0,
  `priority` smallint(6) NOT NULL DEFAULT 10,
  `active` tinyint(1) NOT NULL DEFAULT 0,
  `modified` datetime NOT NULL DEFAULT current_timestamp(),
  `revision` bigint(20) NOT NULL DEFAULT 1,
  `cloud_id` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `scope` (`scope`),
  KEY `active` (`active`)
) ENGINE=InnoDB AUTO_INCREMENT=73 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_snippets` WRITE;
/*!40000 ALTER TABLE `wp_snippets` DISABLE KEYS */;
INSERT INTO `wp_snippets` VALUES
(1,'Make upload filenames lowercase','Makes sure that image and file uploads have lowercase filenames.\n\nThis is a sample snippet. Feel free to use it, edit it, or remove it.','add_filter( \'sanitize_file_name\', \'mb_strtolower\' );','sample, media','global',0,10,0,'2026-01-16 04:21:43',1,NULL),
(2,'Disable admin bar','Turns off the WordPress admin bar for everyone except administrators.\n\nThis is a sample snippet. Feel free to use it, edit it, or remove it.','add_action( \'wp\', function () {\n	if ( ! current_user_can( \'manage_options\' ) ) {\n		show_admin_bar( false );\n	}\n} );','sample, admin-bar','front-end',0,10,0,'2026-01-16 04:21:43',1,NULL),
(3,'Allow smilies','Allows smiley conversion in obscure places.\n\nThis is a sample snippet. Feel free to use it, edit it, or remove it.','add_filter( \'widget_text\', \'convert_smilies\' );\nadd_filter( \'the_title\', \'convert_smilies\' );\nadd_filter( \'wp_title\', \'convert_smilies\' );\nadd_filter( \'get_bloginfo\', \'convert_smilies\' );','sample','global',0,10,0,'2026-01-16 04:21:43',1,NULL),
(4,'Current year','Shortcode for inserting the current year into a post or page..\n\nThis is a sample snippet. Feel free to use it, edit it, or remove it.','<?php echo date( \'Y\' ); ?>','sample, dates','content',0,10,0,'2026-01-16 04:21:43',1,NULL),
(5,'Gate Playground login','<p>Gate 保護頁面</p>','add_action(\'template_redirect\', function () {\n\n  $protected_pages = [\n    \'lt-searching\',\n    \'people\',\n    \'library\',\n    \'progress\',\n    \'demo\',\n    \'logs\',\n    \'momentry-api-console\',\n    \'raptor-api-console\'\n  ];\n\n  if (\n    is_page($protected_pages)\n    && !is_user_logged_in()\n  ) {\n\n    wp_redirect(\n      home_url(\n        \'/login/?redirect_to=\' .\n        rawurlencode($_SERVER[\'REQUEST_URI\'])\n      )\n    );\n\n    exit;\n  }\n});','Gate 保護頁面','global',0,10,1,'2026-05-26 14:18:42',1,NULL),
(6,'確保 Playground 是「必須登入」','','/**\n * Protect Playground page: redirect to login if not logged in\n */\nadd_action(\'template_redirect\', function () {\n\n  // TODO: 改成你 Playground 頁面的 slug\n  // 例如網址是 https://xxx.com/playground/ → slug = \'playground\'\n  if (is_page(\'playground\')) {\n\n    if (!is_user_logged_in()) {\n      $redirect_url = urlencode(home_url($_SERVER[\'REQUEST_URI\']));\n      wp_redirect(home_url(\"/wp-login.php?redirect_to={$redirect_url}\"));\n      exit;\n    }\n  }\n});\n','','global',0,10,-1,'2026-01-19 02:06:19',1,NULL),
(7,'Snippet ①：建立 Login Form shortcode','<p>改畫面功能</p>','/**\n * A) On /login page: fix the REAL login form that posts to wp-login.php\n * B) Provide shortcode [ms_login_form] for your custom card UI (optional usage)\n */\n\n/** ✅ A) CSS fix for the login form shown on /login/ (action ends with wp-login.php) */\nadd_action(\'wp_head\', function () {\n\n  if (!is_page(\'login\')) return;\n\n  echo \'<style id=\"ms-login-width-fix\">\n\n    form[action$=\"wp-login.php\"],\n    form[action$=\"wp-login.php\"] *{\n      box-sizing: border-box !important;\n    }\n\n    form[action$=\"wp-login.php\"] input[type=\"text\"],\n    form[action$=\"wp-login.php\"] input[type=\"email\"],\n    form[action$=\"wp-login.php\"] input[type=\"password\"]{\n      display: block !important;\n      width: 100% !important;\n      max-width: 100% !important;\n      min-width: 0 !important;\n      min-inline-size: 0 !important;\n      inline-size: 100% !important;\n      flex: 1 1 auto !important;\n      flex-basis: auto !important;\n      margin-left: 0 !important;\n      margin-right: 0 !important;\n    }\n\n    form[action$=\"wp-login.php\"] input[type=\"submit\"],\n    form[action$=\"wp-login.php\"] button{\n      display: block !important;\n      width: 100% !important;\n      max-width: 100% !important;\n      min-width: 0 !important;\n      min-inline-size: 0 !important;\n      inline-size: 100% !important;\n      margin-left: 0 !important;\n      margin-right: 0 !important;\n    }\n\n  </style>\';\n\n});\n\n\n/** ✅ B) Shortcode: [ms_login_form] (your custom card UI) */\nadd_shortcode(\'ms_login_form\', function () {\n\n  // 已登入就顯示提示，不做 redirect（避免破壞 REST / 編輯器）\n  if (is_user_logged_in()) {\n    return \'<div id=\"ms-login-card\"><p class=\"ms-login-hint\">You are already logged in. <a href=\"\' . esc_url(home_url(\'/playground\')) . \'\">Go to Playground</a></p></div>\';\n  }\n\n  // 登入後要導回哪裡\n  $redirect_to = isset($_GET[\'redirect_to\'])\n    ? esc_url_raw($_GET[\'redirect_to\'])\n    : home_url(\'/playground\');\n\n  ob_start(); ?>\n\n<style>\n\n  /* 只影響此短碼輸出的卡片 */\n  #ms-login-card,\n  #ms-login-card *{\n    box-sizing: border-box;\n  }\n\n  #ms-login-card{\n    width: min(760px, 92vw);\n    padding: 28px;\n    border-radius: 24px;\n    border: 1px solid rgba(255,255,255,.12);\n    background: rgba(255,255,255,.06);\n    box-shadow: 0 18px 70px rgba(0,0,0,.35);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n    color: rgba(255,255,255,.92);\n  }\n\n  #ms-login-card h3{\n    margin: 0 0 12px 0;\n    font-size: 40px;\n  }\n\n  #ms-login-card .ms-login-hint{\n    margin: 0 0 20px 0;\n    font-size: 20px;\n    opacity: .72;\n    line-height: 1.45;\n  }\n\n  #ms-login-card form{\n    display: grid;\n    gap: 18px;\n    width: 100%;\n  }\n\n  #ms-login-card form > *{\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  #ms-login-card .ms-field{\n    margin: 0;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  #ms-login-card label{\n    display:block;\n    margin: 0 0 10px 0;\n    font-size: 22px;\n    font-weight: 650;\n    opacity: .9;\n  }\n\n  /* input + button 完全同寬 */\n  #ms-login-card input[type=\"text\"],\n  #ms-login-card input[type=\"password\"],\n  #ms-login-card button{\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    min-width: 0 !important;\n    min-inline-size: 0 !important;\n    inline-size: 100% !important;\n    margin: 0 !important;\n    padding-left: 18px !important;\n    padding-right: 18px !important;\n    box-sizing: border-box !important;\n    border-radius: 18px !important;\n    font-size: 18px !important;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  #ms-login-card input[type=\"text\"],\n  #ms-login-card input[type=\"password\"]{\n    padding-top: 18px !important;\n    padding-bottom: 18px !important;\n    border:1px solid rgba(255,255,255,.16) !important;\n    background:rgba(0,0,0,.25) !important;\n    color:#fff !important;\n    outline:none !important;\n  }\n\n  #ms-login-card button{\n    padding-top: 20px !important;\n    padding-bottom: 20px !important;\n    border:0 !important;\n    background:#5b8cff !important;\n    color:#fff !important;\n    font-weight:850 !important;\n    cursor:pointer !important;\n  }\n\n  #ms-login-card .ms-login-error{\n    margin:0;\n    padding:12px 14px;\n    border-radius:14px;\n    background:rgba(239,68,68,.18);\n    border:1px solid rgba(239,68,68,.35);\n    color:rgba(255,255,255,.92);\n    font-size:16px;\n  }\n\n			  \n	#ms-login-card .ms-label-row{\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:12px;\n  margin:0 0 8px 0;\n}\n\n#ms-login-card .ms-label-row label{\n  margin:0;\n}\n\n#ms-login-card .ms-forgot-link{\n  font-size:13px;\n  color:rgba(255,255,255,.68);\n  text-decoration:none;\n}\n\n#ms-login-card .ms-forgot-link:hover{\n  color:#fff;\n  text-decoration:underline;\n}\n\n#ms-login-card .ms-password-wrap{\n  position:relative;\n}\n\n#ms-login-card .ms-password-wrap input{\n  padding-right:74px !important;\n}\n\n#ms-login-card .ms-show-pwd{\n  position:absolute;\n  right:10px;\n  top:50%;\n  transform:translateY(-50%);\n  width:auto !important;\n  padding:7px 10px !important;\n  border-radius:10px !important;\n  background:rgba(255,255,255,.12) !important;\n  font-size:12px !important;\n  font-weight:700 !important;\n}		  \n			  \n</style>\n\n<div id=\"ms-login-card\">\n\n  <h3>Log in to Momentry Studio</h3>\n  <p class=\"ms-login-hint\">After logging in, you will be redirected to Playground</p>\n\n  <?php if (isset($_GET[\'login\']) && $_GET[\'login\'] === \'failed\'): ?>\n    <div class=\"ms-login-error\">\n      Incorrect username or password, please try again.\n    </div>\n  <?php endif; ?>\n\n  <form method=\"post\" action=\"<?php echo esc_url(wp_login_url()); ?>\">\n\n    <div class=\"ms-field\">\n      <label>Username / Email</label>\n      <input type=\"text\" name=\"log\" autocomplete=\"username\" required>\n    </div>\n\n   <div class=\"ms-field\">\n  <div class=\"ms-label-row\">\n    <label for=\"ms-pwd\">Password</label>\n    <a class=\"ms-forgot-link\" href=\"<?php echo esc_url(wp_lostpassword_url()); ?>\">\n      Forgot password?\n    </a>\n  </div>\n\n  <div class=\"ms-password-wrap\">\n    <input id=\"ms-pwd\" type=\"password\" name=\"pwd\" autocomplete=\"current-password\" required>\n    <button type=\"button\" class=\"ms-show-pwd\" onclick=\"toggleMomentryPassword()\">Show</button>\n  </div>\n</div>\n\n    <input type=\"hidden\" name=\"redirect_to\" value=\"<?php echo esc_attr($redirect_to); ?>\">\n\n    <div class=\"ms-field\">\n      <button type=\"submit\">Log in</button>\n    </div>\n\n  </form>\n			  <script>\nfunction toggleMomentryPassword(){\n  const pwd = document.getElementById(\'ms-pwd\');\n  const btn = document.querySelector(\'.ms-show-pwd\');\n\n  if (!pwd || !btn) return;\n\n  if (pwd.type === \'password\') {\n    pwd.type = \'text\';\n    btn.textContent = \'Hide\';\n  } else {\n    pwd.type = \'password\';\n    btn.textContent = \'Show\';\n  }\n}\n</script>\n\n</div>\n\n<?php\n  return ob_get_clean();\n});','改畫面功能','global',0,10,-1,'2026-05-07 02:30:40',1,NULL),
(8,'Snippet ②：鎖住 /playground（未登入就導到 /login）','','// Protect /playground for non-logged-in users\nadd_action(\'template_redirect\', function () {\n\n  // 已登入就放行\n  if (is_user_logged_in()) return;\n\n  // 目前路徑\n  $uri = $_SERVER[\'REQUEST_URI\'] ?? \'\';\n\n  // ✅ 鎖定 /playground（包含 /playground/xxx）\n  $is_playground = (strpos($uri, \'/playground\') === 0);\n\n  if ($is_playground) {\n    $redirect_to = urlencode(home_url($uri));\n    wp_safe_redirect(home_url(\"/login/?redirect_to={$redirect_to}\"));\n    exit;\n  }\n});\n','','global',0,10,-1,'2026-01-20 07:33:23',1,NULL),
(9,'把 wp-login.php 也導回 /login（更像產品）','<p>把 wp-login.php 導去 /login</p>','add_action(\'login_init\', function () {\n\n  $action = $_GET[\'action\'] ?? \'\';\n\n  if (\n    $_SERVER[\'REQUEST_METHOD\'] === \'GET\' &&\n    !in_array($action, [\'logout\', \'lostpassword\', \'resetpass\', \'rp\'])\n  ) {\n    wp_safe_redirect(home_url(\'/login/\'));\n    exit;\n  }\n\n});','把 wp-login.php 導去 /login','global',0,10,1,'2026-05-07 04:39:38',1,NULL),
(10,'Force Login Page Content','','add_action(\'init\', function () {\n  $page = get_page_by_path(\'login\'); // 你的 slug 是 login\n  if (!$page) return;\n\n  $new_content = \"[ms_login_form]\";\n\n  // 如果已經有了，就不再更新\n  if (strpos($page->post_content, $new_content) !== false) return;\n\n  wp_update_post([\n    \'ID\' => $page->ID,\n    \'post_content\' => $new_content\n  ]);\n});\n','','global',0,10,-1,'2026-01-21 00:53:48',1,NULL),
(11,'Redirect After Login','','add_action(\'template_redirect\', function () {\n\n  if (is_user_logged_in()) return;\n\n  $uri = $_SERVER[\'REQUEST_URI\'] ?? \'\';\n\n  // 鎖 /playground（包含 /playground/xxx）\n  if (strpos($uri, \'/playground\') === 0) {\n\n    // ✅ 正確把原頁網址帶回去\n    $current_url = home_url($uri);\n\n    wp_safe_redirect(add_query_arg(\n      \'redirect_to\',\n      rawurlencode($current_url),\n      home_url(\'/login/\')\n    ));\n    exit;\n  }\n});\n','','global',0,10,-1,'2026-01-21 01:34:30',1,NULL),
(12,'Redirect After Login','<p>登入成功去哪</p>','add_filter(\'login_redirect\', function ($redirect_to, $requested_redirect_to, $user) {\n\n  // 只處理登入成功的情況\n  if (is_a($user, \'WP_User\')) {\n\n    // 如果有指定 redirect_to，就回原頁\n    if (!empty($requested_redirect_to)) {\n      return $requested_redirect_to;\n    }\n\n    // 沒有的話一律去 Playground\n    return home_url(\'/Playground/\');\n  }\n\n  return $redirect_to;\n\n}, 10, 3);\n','登入成功去哪','global',0,10,-1,'2026-05-07 03:43:46',1,NULL),
(13,'Show Login Failed','','add_action(\'wp_login_failed\', function () {\n  wp_safe_redirect(home_url(\'/login/?login=failed\'));\n  exit;\n});\n','','global',0,10,-1,'2026-01-21 01:59:31',1,NULL),
(14,'Render Login Page Without Editing','','add_action(\'init\', function () {\n  if (!is_admin()) {\n    header(\'X-MS-SNIPPET: playground-ui-loaded\');\n  }\n});\n\n// \n// \n// \n// \n// // Render login form automatically on /login/ without needing page content\nadd_action(\'template_redirect\', function () {\n\n  $uri = $_SERVER[\'REQUEST_URI\'] ?? \'\';\n  $is_login_page = (strpos($uri, \'/login\') === 0);\n\n  if (!$is_login_page) return;\n\n  // 已登入 → 直接去 playground\n  if (is_user_logged_in()) {\n    wp_safe_redirect(home_url(\'/lt-searching/\'));\n    exit;\n  }\n\n  // 取 redirect_to（如果有）\n  $redirect_to = home_url(\'/lt-searching/\');\n  if (!empty($_GET[\'redirect_to\'])) {\n    $decoded = rawurldecode($_GET[\'redirect_to\']);\n    if (filter_var($decoded, FILTER_VALIDATE_URL)) {\n      $redirect_to = $decoded;\n    }\n  }\n\n  // 顯示 login form（不用依賴頁面內容）\n  status_header(200);\n  nocache_headers();\n  ?>\n  <!doctype html>\n  <html lang=\"zh-Hant\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <title>Playground - Momentry Studio</title>\n\n	  <style>\n  *{box-sizing:border-box;}\n\n  body{\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n    background:#0b1020;\n    color:#fff;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    height:100vh;\n    margin:0;\n  }\n\n  .card{\n    width:380px;\n    background:rgba(255,255,255,.06);\n    border:1px solid rgba(255,255,255,.12);\n    border-radius:18px;\n    padding:24px;\n    box-shadow:0 10px 30px rgba(0,0,0,.35);\n  }\n\n  h1{\n    font-size:20px;\n    margin:0 0 14px 0;\n  }\n\n  label{\n    display:block;\n    font-size:12px;\n    opacity:.8;\n    margin-bottom:6px;\n  }\n\n  input,\n  button{\n    display:block;\n    width:100%;\n    max-width:100%;\n    box-sizing:border-box;\n  }\n\n  input{\n    padding:12px 12px;\n    border-radius:12px;\n    border:1px solid rgba(255,255,255,.15);\n    background:rgba(0,0,0,.25);\n    color:#fff;\n    outline:none;\n    margin:0;\n  }\n\n  button{\n    padding:12px;\n    border-radius:12px;\n    border:0;\n    background:#5b8cff;\n    color:#fff;\n    font-weight:700;\n    cursor:pointer;\n    margin-top:14px;\n  }\n\n  .hint{\n    opacity:.7;\n    font-size:12px;\n    margin-top:10px;\n    line-height:1.5;\n  }\n\n  .err{\n    margin:0 0 12px 0;\n    padding:10px 12px;\n    border-radius:12px;\n    background:#3b1111;\n    color:#ffb4b4;\n    font-size:13px;\n  }\n</style>\n  </head>\n  <body>\n    <div class=\"card\">\n      <h1>Log in to Momentry Studio</h1>\n\n      <?php if (isset($_GET[\'login\']) && $_GET[\'login\'] === \'failed\'): ?>\n        <div class=\"err\">帳號或密碼錯誤，請再試一次</div>\n      <?php endif; ?>\n\n      <form method=\"post\" action=\"<?php echo esc_url(site_url(\'wp-login.php\',\'login_post\')); ?>\">\n        <div>\n          <label>Username / Email</label>\n          <input name=\"log\" autocomplete=\"username\" required />\n        </div>\n\n        <div style=\"margin-top:12px;\">\n          <label>Password</label>\n          <input type=\"password\" name=\"pwd\" autocomplete=\"current-password\" required />\n        </div>\n\n        <input type=\"hidden\" name=\"redirect_to\" value=\"<?php echo esc_attr($redirect_to); ?>\">\n\n        <button type=\"submit\">Log in</button>\n      </form>\n\n      <div class=\"hint\">After logging in, you will be redirected to Playground</div>\n    </div>\n  </body>\n  </html>\n  <?php\n  exit;\n});\n','','global',0,10,-1,'2026-03-12 10:32:59',1,NULL),
(15,'Playground Dashboard UI','','$N8N_DASHBOARD_URL = \'https://accusys1.app.n8n.cloud/webhook/ms-dashboard\';\n\n$uri = $_SERVER[\'REQUEST_URI\'] ?? \'\';\nif (strpos($uri, \'/playground\') !== 0) return;\n\n','','global',0,10,-1,'2026-01-21 03:46:19',1,NULL),
(16,'AI Studio Layout','','/* ================= AI STUDIO CONTENT (FOR APP SHELL) ================= */\nadd_shortcode(\'ai_studio_layout\', function () {\n  ob_start(); ?>\n\n  <div id=\"ai-studio-app\">\n    <div class=\"ai-main\">\n\n      <div class=\"ms-card\">\n        <div class=\"ms-title\">Momentry Studio</div>\n        <div class=\"ms-subtitle\">\n          Your AI-powered media workspace.\n        </div>\n\n        <div class=\"studio-grid\">\n\n          <a href=\"/playground/\" class=\"studio-card-link\">\n            <div class=\"studio-card\">\n              <div class=\"studio-card-title\">🎬 Media Library</div>\n              <div class=\"studio-card-text\">\n                Browse and manage your indexed video moments.\n              </div>\n            </div>\n          </a>\n\n          <a href=\"/playground/\" class=\"studio-card-link\">\n            <div class=\"studio-card\">\n              <div class=\"studio-card-title\">🧠 AI Insights</div>\n              <div class=\"studio-card-text\">\n                See summaries, tags, and detected key events.\n              </div>\n            </div>\n          </a>\n\n          <div class=\"studio-card\">\n            <div class=\"studio-card-title\">⚙️ System Status</div>\n            <div class=\"studio-card-text\" id=\"msSysStatus\">\n              Connecting to system…\n            </div>\n            <div class=\"studio-status-row\">\n              <span id=\"msSysDot\" class=\"studio-dot\"></span>\n              <span id=\"msSysLatency\"></span>\n            </div>\n          </div>\n\n        </div>\n      </div>\n\n    </div>\n  </div>\n\n  <?php\n  return ob_get_clean();\n});\n\n\n/* ================= STUDIO STYLES ================= */\nadd_action(\'wp_head\', function () {\n?>\n<style>\n\n#ai-studio-app {\n  width: 100%;\n}\n\n.ai-main {\n  width: 100%;\n}\n\n.ms-card {\n  background: #fff;\n  padding: 36px;\n  border-radius: 18px;\n  box-shadow: 0 30px 80px rgba(0,0,0,0.06);\n}\n\n.ms-title {\n  font-size: 26px;\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.ms-subtitle {\n  color: #666;\n  margin-bottom: 28px;\n  font-size: 16px;\n}\n\n.studio-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  gap: 20px;\n}\n\n.studio-card-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n.studio-card {\n  background: #f7f8fc;\n  border-radius: 14px;\n  padding: 20px;\n  transition: 0.2s ease;\n}\n\n.studio-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n}\n\n.studio-card-title {\n  font-weight: 600;\n  margin-bottom: 8px;\n}\n\n.studio-card-text {\n  color: #555;\n  font-size: 14px;\n}\n\n.studio-status-row {\n  margin-top: 10px;\n  font-size: 13px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.studio-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #999;\n}\n\n</style>\n<?php\n});\n\n\n/* ================= SYSTEM STATUS LIVE DATA ================= */\nadd_action(\'wp_footer\', function () {\n?>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", async function () {\n  try {\n    const res = await fetch(\"https://accusys1.app.n8n.cloud/webhook/ms-dashboard\");\n    const data = await res.json();\n\n    document.getElementById(\"msSysStatus\").innerText =\n      \"API Connected • Scope: \" + data.scope;\n\n    document.getElementById(\"msSysLatency\").innerText =\n      \"Latency: \" + data.status.latency_ms + \" ms\";\n\n    document.getElementById(\"msSysDot\").style.background =\n      data.status.api === \"connected\" ? \"#22c55e\" : \"#ef4444\";\n\n  } catch (e) {\n    document.getElementById(\"msSysStatus\").innerText = \"System offline\";\n    document.getElementById(\"msSysDot\").style.background = \"#ef4444\";\n  }\n});\n</script>\n<?php\n});\n','','global',0,10,-1,'2026-01-27 06:17:41',1,NULL),
(17,'AI Studio Layout CSS','','#ai-studio-app{\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fb;\n  font-family: system-ui, -apple-system;\n}\n\n.ai-header{\n  height: 56px;\n  background: #fff;\n  border-bottom: 1px solid rgba(0,0,0,.08);\n  display:flex;\n  align-items:center;\n  padding: 0 20px;\n}\n\n.ai-body{\n  flex:1;\n  display:flex;\n}\n\n.ai-sidebar{\n  width: 220px;\n  background:#fff;\n  border-right: 1px solid rgba(0,0,0,.08);\n  padding: 12px;\n}\n.ai-view {\n  display: none;\n}\n\n.ai-view.active {\n  display: block;\n}\n\n.ai-nav-item{\n  padding: 10px 12px;\n  border-radius: 8px;\n  margin-bottom: 4px;\n  cursor:pointer;\n}\n\n.ai-nav-item.active{\n  background: rgba(0,0,0,.06);\n}\n\n.ai-main{\n  flex:1;\n  padding: 24px;\n}\n\n.ai-main {\n  position: relative;\n  height: 100%;\n}\n\n.ai-view {\n  display: none;\n  height: 100%;\n}\n\n.ai-view.active {\n  display: block;\n}\n\n\n/* === Hide theme header/footer ONLY for AI Studio page === */\nbody.page-id-60 header,\nbody.page-id-60 footer,\nbody.page-id-60 .site-header,\nbody.page-id-60 .site-footer {\n  display: none !important;\n}\n\n/* remove theme content padding */\nbody.page-id-60 #content,\nbody.page-id-60 .site-content,\nbody.page-id-60 main {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\n/* ===== FORCE hide theme header/footer for AI Studio page ===== */\nbody.page-id-60 header,\nbody.page-id-60 footer,\nbody.page-id-60 .site-header,\nbody.page-id-60 .site-footer,\nbody.page-id-60 #masthead,\nbody.page-id-60 #colophon {\n  display: none !important;\n}\n\n/* remove theme spacing */\nbody.page-id-60 #page,\nbody.page-id-60 #content,\nbody.page-id-60 .site-content,\nbody.page-id-60 main {\n  margin: 0 !important;\n  padding: 0 !important;\n  max-width: none !important;\n}\n/* === AI Studio View Switch (CRITICAL) === */\n.ai-view {\n  display: none !important;\n}\n\n.ai-view.active {\n  display: block !important;\n}\n','','global',0,10,-1,'2026-01-26 05:44:25',1,NULL),
(18,'AI Studio Layout CSS (Force)','','add_action(\'wp_head\', function () {\n  ?>\n  <style>\n    #ai-studio-app{\n      height: 100vh;\n      display: flex;\n      flex-direction: column;\n      background: #f8f9fb;\n      font-family: system-ui, -apple-system;\n    }\n\n    .ai-header{\n      height: 56px;\n      background: #fff;\n      border-bottom: 1px solid rgba(0,0,0,.08);\n      display:flex;\n      align-items:center;\n      padding: 0 20px;\n    }\n\n    .ai-body{\n      flex:1;\n      display:flex;\n    }\n\n    .ai-sidebar{\n      width: 220px;\n      background:#fff;\n      border-right: 1px solid rgba(0,0,0,.08);\n      padding: 12px;\n    }\n\n    .ai-nav-item{\n      padding: 10px 12px;\n      border-radius: 8px;\n      margin-bottom: 4px;\n      cursor:pointer;\n    }\n\n    .ai-nav-item.active{\n      background: rgba(0,0,0,.06);\n    }\n\n    .ai-main{\n      flex:1;\n      padding: 24px;\n    }\n  </style>\n  <?php\n});\n/* Remove theme container constraints */\n#ai-studio-app {\n  position: fixed;\n  inset: 0;\n  z-index: 10;\n}\n\n/* 保險：清掉外層 padding */\nbody,\n#page,\n.site,\n.site-content,\nmain {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n/* ===== FORCE hide WordPress page title (ALL THEMES) ===== */\n.entry-title,\n.page-title,\n.wp-block-post-title,\nheader h1,\nmain h1:first-child {\n  display: none !important;\n}\n\n/* ===== FORCE AI Studio take full viewport ===== */\n#ai-studio-app {\n  position: fixed;\n  inset: 0;\n  z-index: 999;\n  background: #f8f9fb;\n}\n/* ===== App Shell height & scroll model ===== */\nhtml, body {\n  height: 100%;\n  overflow: hidden; /* 防止整頁捲動 */\n}\n\n#ai-studio-app {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Header 固定高度 */\n.ai-header {\n  flex: 0 0 56px;\n}\n\n/* Body 佔滿剩餘高度 */\n.ai-body {\n  flex: 1 1 auto;\n  min-height: 0;          /* 關鍵：讓內層可以滾 */\n  display: flex;\n}\n\n/* Sidebar 固定，不滾 */\n.ai-sidebar {\n  flex: 0 0 220px;\n  overflow: hidden;\n}\n\n/* Main 才是滾動容器 */\n.ai-main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;          /* 關鍵 */\n  overflow: auto;         /* 只滾這裡 */\n  padding: 24px;\n  background: #f8f9fb;\n}\n/* ===== Playground full-height ===== */\n.ai-main .ms-card {\n  height: 100%;\n  max-height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Result 區塊可以自己滾 */\n.ai-main .ms-result-body {\n  overflow: auto;\n}\n\n/* 如果你有外層卡片 padding，避免撐爆 */\n.ai-main .ms-card * {\n  box-sizing: border-box;\n}\n/* === FORCE AI Studio View Switch === */\n#ai-studio-app .ai-view {\n  display: none !important;\n}\n\n#ai-studio-app .ai-view.active {\n  display: block !important;\n}\n/* ===== AI Studio View Switch ===== */\n\n/* 預設：全部 view 都隱藏 */\n#ai-studio-app .ai-view {\n  display: none;\n}\n\n/* 只有 active 的才顯示 */\n#ai-studio-app .ai-view.active {\n  display: block;\n}\n','','global',0,10,-1,'2026-01-26 05:38:16',1,NULL),
(19,'Disable Page Title for AI Studio','','/**\n * Disable page title output for AI Studio page\n */\nadd_filter(\'the_title\', function ($title, $id) {\n\n  // 只在前台\n  if (is_admin()) return $title;\n\n  // 只針對 Page\n  if (!is_page($id)) return $title;\n\n  // 判斷是否包含我們的 AI Studio shortcode\n  $post = get_post($id);\n  if (!$post) return $title;\n\n  if (has_shortcode($post->post_content, \'ai_studio_layout\')) {\n    return \'\'; // 👈 直接讓標題變成空\n  }\n\n  return $title;\n}, 10, 2);\n','','global',0,10,-1,'2026-01-26 03:08:53',1,NULL),
(20,'Hide Site Title and Post Title on AI Studio Page','','/**\n * Hide Site Title / Post Title blocks ONLY on pages that contain [ai_studio_layout]\n */\nadd_filter(\'render_block\', function ($block_content, $block) {\n\n  if (is_admin() || !is_singular()) return $block_content;\n\n  $post = get_post();\n  if (!$post) return $block_content;\n\n  // 只針對有放我們 shortcode 的頁面\n  if (!has_shortcode($post->post_content, \'ai_studio_layout\')) return $block_content;\n\n  $name = $block[\'blockName\'] ?? \'\';\n\n  // 擋掉「Momentry Studio」常見來源：Site Title / Post Title\n  if ($name === \'core/site-title\' || $name === \'core/post-title\') {\n    return \'\';\n  }\n\n  return $block_content;\n\n}, 10, 2);\n','','global',0,10,-1,'2026-01-26 03:11:21',1,NULL),
(21,'AI Studio Layout CSS Loader','','/**\n * Inject AI Studio layout CSS for pages using [ai_studio_layout]\n */\nadd_action(\'wp_enqueue_scripts\', function () {\n\n  if (!is_singular()) return;\n\n  global $post;\n  if (!$post) return;\n\n  // 只在有使用 shortcode 的頁面載入\n  if (!has_shortcode($post->post_content, \'ai_studio_layout\')) return;\n\n  // 確保有一個 style 可以掛 inline css\n  wp_register_style(\'ai-studio-inline\', false);\n  wp_enqueue_style(\'ai-studio-inline\');\n\n  $css = <<<CSS\nhtml, body {\n  height: 100%;\n  overflow: hidden;\n}\n\n#ai-studio-app {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fb;\n}\n\n.ai-header {\n  height: 56px;\n  display: flex;\n  align-items: center;\n  padding: 0 20px;\n  background: #fff;\n  border-bottom: 1px solid rgba(0,0,0,.08);\n  font-weight: 600;\n}\n\n.ai-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n}\n\n.ai-sidebar {\n  width: 220px;\n  background: #fff;\n  border-right: 1px solid rgba(0,0,0,.08);\n  padding: 16px 12px;\n}\n\n.ai-nav-item {\n  padding: 10px 12px;\n  border-radius: 10px;\n  cursor: pointer;\n}\n\n.ai-nav-item.active {\n  background: rgba(0,0,0,.06);\n  font-weight: 600;\n}\n\n.ai-main {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  padding: 24px;\n}\n.ms-card{\n  max-width: 900px;\n  width: 100%;\n  border: 1px solid rgba(0,0,0,.08);\n  border-radius: 14px;\n  padding: 20px;\n  background: #fff;\n  box-shadow: 0 6px 20px rgba(0,0,0,.05);\n}\n.ms-title{ font-size:22px; font-weight:700; }\n.ms-subtitle{ opacity:.75; }\n.ms-textarea{ width:100%; border-radius:12px; }\n.ms-mode.active{ background:#111; color:#fff; }\n...\n\nCSS;\n\n  wp_add_inline_style(\'ai-studio-inline\', $css);\n});\n','','global',0,10,-1,'2026-01-26 03:27:35',1,NULL),
(22,'AI Studio View Switcher JS','','add_action(\'wp_footer\', function () {\n?>\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function () {\n\n  const navItems = document.querySelectorAll(\'#ai-studio-app .ai-nav-item\');\n  const views = document.querySelectorAll(\'#ai-studio-app .ai-view\');\n\n  if (!navItems.length || !views.length) return;\n\n  function switchView(target) {\n    views.forEach(view => {\n      view.classList.toggle(\n        \'active\',\n        view.dataset.view === target\n      );\n    });\n\n    navItems.forEach(item => {\n      item.classList.toggle(\n        \'active\',\n        item.dataset.view === target\n      );\n    });\n  }\n\n  // 初始化\n  const current =\n    document.querySelector(\'#ai-studio-app .ai-nav-item.active\')\n      ?.dataset.view || \'playground\';\n\n  switchView(current);\n\n  // 點擊切換\n  navItems.forEach(item => {\n    item.addEventListener(\'click\', () => {\n      switchView(item.dataset.view);\n    });\n  });\n\n});\n</script>\n<?php\n});\n','','global',0,10,-1,'2026-01-26 05:34:56',1,NULL),
(23,'AI Studio Full Width Content Only','','add_action(\'wp_head\', function() {\n    if (is_page(\'ai-studio\')) {\n        echo \'<style>\n\n/* 讓主要內容區塊全寬 */\n.ai-studio-fullwidth .wp-site-blocks,\n.ai-studio-fullwidth main,\n.ai-studio-fullwidth .entry-content,\n.ai-studio-fullwidth .wp-block-post-content {\n    max-width: 100% !important;\n    width: 100% !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n}\n\n/* 拿掉 WordPress 預設的內容邊界 */\n.ai-studio-fullwidth .wp-block-group,\n.ai-studio-fullwidth .alignwide,\n.ai-studio-fullwidth .alignfull {\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n}\n\n        </style>\';\n    }\n});\n\nadd_filter(\'body_class\', function($classes) {\n    if (is_page(\'ai-studio\')) {\n        $classes[] = \'ai-studio-fullwidth\';\n    }\n    return $classes;\n});\n','','global',0,10,-1,'2026-01-26 15:32:44',1,NULL),
(24,'Playground Dashboard UI [CLONE]','','$N8N_DASHBOARD_URL = \'https://accusys1.app.n8n.cloud/webhook/ms-dashboard\';\n\n$uri = $_SERVER[\'REQUEST_URI\'] ?? \'\';\nif (strpos($uri, \'/playground\') !== 0) return;\n\n','','global',0,10,-1,'2026-01-27 05:44:04',1,NULL),
(25,'AI Studio Layout CSS [CLONE]','','#ai-studio-app{\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  background: #f8f9fb;\n  font-family: system-ui, -apple-system;\n}\n\n.ai-header{\n  height: 56px;\n  background: #fff;\n  border-bottom: 1px solid rgba(0,0,0,.08);\n  display:flex;\n  align-items:center;\n  padding: 0 20px;\n}\n\n.ai-body{\n  flex:1;\n  display:flex;\n}\n\n.ai-sidebar{\n  width: 220px;\n  background:#fff;\n  border-right: 1px solid rgba(0,0,0,.08);\n  padding: 12px;\n}\n.ai-view {\n  display: none;\n}\n\n.ai-view.active {\n  display: block;\n}\n\n.ai-nav-item{\n  padding: 10px 12px;\n  border-radius: 8px;\n  margin-bottom: 4px;\n  cursor:pointer;\n}\n\n.ai-nav-item.active{\n  background: rgba(0,0,0,.06);\n}\n\n.ai-main{\n  flex:1;\n  padding: 24px;\n}\n\n.ai-main {\n  position: relative;\n  height: 100%;\n}\n\n.ai-view {\n  display: none;\n  height: 100%;\n}\n\n.ai-view.active {\n  display: block;\n}\n\n\n/* === Hide theme header/footer ONLY for AI Studio page === */\nbody.page-id-60 header,\nbody.page-id-60 footer,\nbody.page-id-60 .site-header,\nbody.page-id-60 .site-footer {\n  display: none !important;\n}\n\n/* remove theme content padding */\nbody.page-id-60 #content,\nbody.page-id-60 .site-content,\nbody.page-id-60 main {\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\n/* ===== FORCE hide theme header/footer for AI Studio page ===== */\nbody.page-id-60 header,\nbody.page-id-60 footer,\nbody.page-id-60 .site-header,\nbody.page-id-60 .site-footer,\nbody.page-id-60 #masthead,\nbody.page-id-60 #colophon {\n  display: none !important;\n}\n\n/* remove theme spacing */\nbody.page-id-60 #page,\nbody.page-id-60 #content,\nbody.page-id-60 .site-content,\nbody.page-id-60 main {\n  margin: 0 !important;\n  padding: 0 !important;\n  max-width: none !important;\n}\n/* === AI Studio View Switch (CRITICAL) === */\n.ai-view {\n  display: none !important;\n}\n\n.ai-view.active {\n  display: block !important;\n}\n','','global',0,10,-1,'2026-01-27 05:44:16',1,NULL),
(26,'Momentry App Shell','','add_filter(\'the_content\', function ($content) {\n\n  // 只在這兩頁生效：/playground 與 /momentry-studio\nif (!is_page([\'playground\', \'ai-studio\'])) return $content;\n\n  // 共用外殼：左側選單 + 右側主內容（原本頁面內容放進來）\n  ob_start();\n  ?>\n  <style>\n    body { background:#f5f6f8; }\n    .ms-app{display:flex;gap:24px;max-width:1200px;margin:0 auto;padding:24px;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}\n    .ms-side{width:240px;background:#fff;border:1px solid #eee;border-radius:16px;padding:18px;height:fit-content}\n    .ms-brand{font-weight:700;margin-bottom:14px}\n    .ms-nav a{display:block;padding:12px 12px;border-radius:12px;text-decoration:none;color:#111;margin-bottom:8px}\n    .ms-nav a.active{background:#111;color:#fff}\n    .ms-main{flex:1;background:#fff;border:1px solid #eee;border-radius:16px;padding:28px}\n  </style>\n\n  <div class=\"ms-app\">\n    <aside class=\"ms-side\">\n      <div class=\"ms-brand\">Momentry Studio</div>\n      <nav class=\"ms-nav\">\n        <a class=\"<?php echo is_page(\'playground\') ? \'active\' : \'\'; ?>\" href=\"<?php echo home_url(\'/playground/\'); ?>\">Playground</a>\n        <a class=\"<?php echo is_page(\'momentry-studio\') ? \'active\' : \'\'; ?>\" href=\"<?php echo home_url(\'/momentry-studio/\'); ?>\">Studio</a>\n      </nav>\n    </aside>\n\n    <main class=\"ms-main\">\n      <?php echo $content; ?>\n    </main>\n  </div>\n  <?php\n  return ob_get_clean();\n}, 99);\n','','global',0,10,-1,'2026-01-27 07:08:32',1,NULL),
(27,'Momentry Unified App','','/* ================= MOMENTRY UNIFIED APP SHELL ================= */\nadd_shortcode(\'momentry_app\', function () {\n  ob_start(); ?>\n\n  <div id=\"momentry-app\">\n    <div class=\"ai-body\">\n\n      <!-- 左側選單 -->\n      <aside class=\"ai-sidebar\">\n        <div class=\"ai-logo\">Momentry AI</div>\n        <div class=\"ai-nav-item active\" data-view=\"studio\">Studio</div>\n        <div class=\"ai-nav-item\" data-view=\"playground\">Playground</div>\n      </aside>\n\n      <!-- 右側主內容 -->\n      <main class=\"ai-main\">\n\n        <!-- ========== STUDIO 首頁 ========== -->\n        <section class=\"ai-view active\" data-view=\"studio\">\n          <div class=\"ms-card\">\n            <div class=\"ms-title\">Momentry Studio</div>\n            <div class=\"ms-subtitle\">Your AI-powered media workspace.</div>\n\n            <div class=\"studio-grid\">\n\n              <div class=\"studio-card ai-switch\" data-target=\"playground\">\n                <div class=\"studio-card-title\">🎬 Media Library</div>\n                <div class=\"studio-card-text\">Browse and manage your indexed video moments.</div>\n              </div>\n\n              <div class=\"studio-card ai-switch\" data-target=\"playground\">\n                <div class=\"studio-card-title\">🧠 AI Insights</div>\n                <div class=\"studio-card-text\">See summaries, tags, and detected key events.</div>\n              </div>\n\n              <div class=\"studio-card\">\n                <div class=\"studio-card-title\">⚙️ System Status</div>\n                <div class=\"studio-card-text\" id=\"msSysStatus\">Connecting to system…</div>\n                <div class=\"studio-status-row\">\n                  <span id=\"msSysDot\" class=\"studio-dot\"></span>\n                  <span id=\"msSysLatency\"></span>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </section>\n\n        <!-- ========== PLAYGROUND ========== -->\n        <section class=\"ai-view\" data-view=\"playground\">\n          <?php echo do_shortcode(\'[playground_dashboard]\'); ?>\n        </section>\n\n      </main>\n    </div>\n  </div>\n\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', () => {\n\n  // 左側選單切換\n  const navItems = document.querySelectorAll(\'.ai-nav-item\');\n  const views = document.querySelectorAll(\'.ai-view\');\n\n  function switchView(viewName){\n    navItems.forEach(i => i.classList.toggle(\'active\', i.dataset.view === viewName));\n    views.forEach(v => v.classList.toggle(\'active\', v.dataset.view === viewName));\n  }\n\n  navItems.forEach(item => {\n    item.addEventListener(\'click\', () => switchView(item.dataset.view));\n  });\n\n  // Studio 卡片跳轉 Playground\n  document.querySelectorAll(\'.ai-switch\').forEach(card => {\n    card.addEventListener(\'click\', () => switchView(card.dataset.target));\n  });\n\n  // System Status API\n  fetch(\"https://accusys1.app.n8n.cloud/webhook/ms-dashboard\")\n    .then(res => res.json())\n    .then(data => {\n      document.getElementById(\"msSysStatus\").innerText =\n        \"API Connected • Scope: \" + data.scope;\n      document.getElementById(\"msSysLatency\").innerText =\n        \"Latency: \" + data.status.latency_ms + \" ms\";\n      document.getElementById(\"msSysDot\").style.background =\n        data.status.api === \"connected\" ? \"#22c55e\" : \"#ef4444\";\n    })\n    .catch(() => {\n      document.getElementById(\"msSysStatus\").innerText = \"System offline\";\n      document.getElementById(\"msSysDot\").style.background = \"#ef4444\";\n    });\n\n});\n</script>\n\n  <?php\n  return ob_get_clean();\n});\n\n\n/* ================= GLOBAL APP STYLES ================= */\nadd_action(\'wp_head\', function () {\n?>\n<style>\n\nbody.page .entry-content,\nbody.page .site-main,\nbody.page main {\n  max-width: 100% !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n#momentry-app { padding: 50px 60px; background: #f6f7fb; min-height: 100vh; }\n\n.ai-body { display: flex; gap: 60px; }\n\n.ai-sidebar { width: 220px; }\n.ai-logo { font-weight: 700; font-size: 18px; margin-bottom: 25px; }\n\n.ai-nav-item { padding: 12px 14px; border-radius: 10px; cursor: pointer; margin-bottom: 6px; }\n.ai-nav-item.active { background: #111; color: white; }\n\n.ai-main { flex: 1; max-width: 1100px; }\n\n.ms-card { background: white; padding: 40px; border-radius: 18px; box-shadow: 0 25px 60px rgba(0,0,0,0.06); }\n\n.ms-title { font-size: 26px; font-weight: 600; margin-bottom: 6px; }\n.ms-subtitle { color: #666; margin-bottom: 28px; }\n\n.studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }\n\n.studio-card { background: #f7f8fc; border-radius: 14px; padding: 20px; transition: .2s; cursor:pointer; }\n.studio-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); }\n\n.studio-card-title { font-weight: 600; margin-bottom: 8px; }\n.studio-card-text { color: #555; font-size: 14px; }\n\n.studio-status-row { margin-top: 10px; font-size: 13px; color: #666; display:flex; gap:8px; align-items:center; }\n.studio-dot { width:10px; height:10px; border-radius:50%; background:#999; }\n\n.ai-view { display:none; }\n.ai-view.active { display:block; }\n\n</style>\n<?php\n});\n','','global',0,10,1,'2026-01-27 06:25:58',1,NULL),
(28,'Momentry App Shell (Sidebar Layout)','','add_filter(\'the_content\', function ($content) {\n\n  if (!is_page([\'playground\', \'ai-studio\', \'ww\', \'susan-testing\'])) return $content;\n\n  ob_start(); ?>\n\n  <style>\n	  /* 🌤 全站大背景 — 恢復藍灰 Apple 風漸層 */\nhtml, body {\n  background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 40%, #e9eff8 100%) !important;\n}\n\n html, body{\n  height:100%;\n  margin:0;\n  overflow:hidden;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n}\n\n	.ms-menu-item{\n  padding:10px 16px;\n  cursor:pointer;\n}\n.ms-menu-item:hover{\n  background:#f5f6f8;\n}\n.ms-menu-item[data-action=\"delete\"]{\n  color:#d93025;\n  font-weight:600;\n}\n\n.ms-history-item {\n  padding:8px 10px;\n  border-radius:8px;\n  font-size:12px;\n  color:#3c4043;\n  cursor:pointer;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n}\n\n.ms-history-item:hover { background:#f1f3f4; }\n.ms-history-item.active { background:#e8f0fe; color:#1967d2; font-weight:600; }\n\n.ms-history-title {\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n  flex:1;\n}\n\n.ms-history-menu {\n  font-size:14px;\n  color:#999;\n  margin-left:6px;\n  cursor:pointer;\n}\n\n    .ms-app{\n      display:flex;\n      height:96vh;\n      max-width:1400px;\n      margin:0 auto;\n      padding:28px;\n      gap:28px;\n      box-sizing:border-box;\n    }\n\n    .ms-side{\n      width:240px;\n      min-width:240px;\n      flex-shrink:0;\n      background:#fff;\n      border-radius:18px;\n      padding:18px 14px;\n      box-shadow:0 4px 18px rgba(0,0,0,0.05);\n      display:flex;\n      flex-direction:column;\n    }\n\n    .gs-logo{\n      font-size:15px;\n      font-weight:600;\n      color:#202124;\n      padding:8px 12px 16px 12px;\n    }\n\n    .gs-nav{\n      display:flex;\n      flex-direction:column;\n      gap:4px;\n    }\n\n    .gs-nav a{\n      display:flex;\n      align-items:center;\n      gap:12px;\n      padding:10px 12px;\n      border-radius:10px;\n      text-decoration:none;\n      color:#3c4043;\n      font-weight:500;\n      transition:.15s ease;\n    }\n\n    .gs-nav a:hover{ background:#f1f3f4; }\n    .gs-nav a.active{ background:#e8f0fe; color:#1967d2; font-weight:600; }\n\n    .gs-divider{ height:1px; background:#eee; margin:14px 8px; }\n\n    /* ===== 使用者區塊 ===== */\n    .gs-user{\n      margin-top:auto;\n      padding:10px 12px;\n      border-radius:12px;\n      display:flex;\n      align-items:center;\n      gap:10px;\n      background:#f8f9fa;\n      cursor:pointer;\n      position:relative;\n    }\n\n    .gs-avatar{\n      width:34px;\n      height:34px;\n      border-radius:50%;\n      object-fit:cover;\n    }\n\n    .gs-user-info{ font-size:12px; line-height:1.2; }\n    .gs-user-name{\n  font-size:13px;\n  font-weight:600;\n  color:#202124;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n\n.gs-user-plan{\n  font-size:11px;\n  color:#5f6368;\n}\n\n\n    /* ===== 帳戶下拉選單 ===== */\n    .gs-user-menu{\n      display:none;\n      position:absolute;\n      bottom:54px;\n      left:0;\n      width:260px;\n      background:#fff;\n      border-radius:18px;\n      box-shadow:0 12px 40px rgba(0,0,0,.15);\n      border:1px solid #e6e8eb;\n      padding:10px 0;\n      z-index:999;\n    }\n\n    .gs-user-menu.show{ display:block; }\n\n    .gs-user-card{\n      display:flex;\n      align-items:center;\n      gap:12px;\n      padding:14px 16px;\n    }\n\n    .gs-avatar-lg{\n      width:42px;\n      height:42px;\n      border-radius:50%;\n    }\n\n    .gs-user-name{ font-weight:600; font-size:15px; }\n    .gs-user-handle{ font-size:13px; color:#777; }\n\n    .gs-menu-divider{ height:1px; background:#eee; margin:8px 0; }\n\n    .gs-menu-item{\n      display:flex;\n      align-items:center;\n      gap:12px;\n      padding:10px 18px;\n      text-decoration:none;\n      color:#222;\n      font-size:14px;\n    }\n\n    .gs-menu-item:hover{ background:#f3f4f6; }\n    .gs-menu-item.logout{ color:#c62828; }\n\n    .ms-main{\n  flex:1;\n  min-width:0;\n  background:transparent;  /* 不要白底 */\n  border-radius:0;         /* 移除第二層圓角 */\n  padding:36px 42px;\n  box-shadow:none;\n  overflow-y:auto;\n  overflow-x:hidden;\n}\n\n						 /* ===== Search History in Sidebar ===== */\n.ms-history-item {\n  padding:8px 10px;\n  border-radius:8px;\n  font-size:12px;\n  color:#3c4043;\n  cursor:pointer;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n\n.ms-history-item:hover {\n  background:#f1f3f4;\n}\n\n.ms-history-item.active {\n  background:#e8f0fe;\n  color:#1967d2;\n  font-weight:600;\n}\n						 \n						 /* 🌟 全站統一 Apple 風外框 */\n.site,\n.site-content,\n.content-area {\n  background: transparent !important;\n  border-radius:28px !important;\n  overflow:hidden;\n  box-shadow:0 25px 70px rgba(0,0,0,.06);\n}\n\n\n  </style>\n\n <script>\ndocument.addEventListener(\"DOMContentLoaded\", async function(){\n\n  if(typeof window.MS_REST === \"undefined\") return;\n\n  async function msLoadHistory(){\n    const res = await fetch(window.MS_REST.root + \"momentry/v1/search-history\", {\n      headers: { \"X-WP-Nonce\": window.MS_REST.nonce }\n    });\n    const json = await res.json();\n    return json.ok ? json.data : [];\n  }\n\n  function msRenderHistory(items){\n    const list = document.getElementById(\"msHistoryList\");\n    if(!list) return;\n\n    if(!items.length){\n      list.innerHTML = `<div style=\"font-size:12px;color:#999;padding:6px 12px;\">No history yet</div>`;\n      return;\n    }\n\n    list.innerHTML = items.map(it => `\n      <div class=\"ms-history-item\" data-id=\"${it.id}\">\n        <span class=\"ms-history-title\">${it.query}</span>\n        <span class=\"ms-history-menu\">⋯</span>\n      </div>\n    `).join(\'\');\n  }\n\n  // 點擊整個項目 → 載入對話\n  document.addEventListener(\"click\", async function(e){\n    const item = e.target.closest(\".ms-history-item\");\n    if(!item || e.target.classList.contains(\"ms-history-menu\")) return;\n\n    document.querySelectorAll(\".ms-history-item\").forEach(i=>i.classList.remove(\"active\"));\n    item.classList.add(\"active\");\n\n    const id = item.dataset.id;\n\n    const res = await fetch(window.MS_REST.root + \"momentry/v1/search-thread/\" + id, {\n      headers: { \"X-WP-Nonce\": window.MS_REST.nonce }\n    });\n    const json = await res.json();\n    if(!json.ok) return;\n\n    const box = document.getElementById(\"chatMessages\");\n    if(!box) return;\n\n    box.innerHTML = \"\";\n    (json.data.messages || []).forEach(m=>{\n      box.innerHTML += `<div class=\"msg-user\">${m.query}</div>`;\n      box.innerHTML += `<div class=\"msg-ai\">${m.answer || \"No answer\"}</div>`;\n    });\n\n    box.scrollTop = box.scrollHeight;\n    window.currentThreadId = parseInt(id);\n  });\n// 建立右鍵選單\nfunction createHistoryMenu(x, y, id){\n  const old = document.getElementById(\"msHistoryDropdown\");\n  if(old) old.remove();\n\n  const menu = document.createElement(\"div\");\n  menu.id = \"msHistoryDropdown\";\n  menu.style.position = \"fixed\";\n  menu.style.top = y + \"px\";\n  menu.style.left = x + \"px\";\n  menu.style.background = \"#fff\";\n  menu.style.borderRadius = \"14px\";\n  menu.style.boxShadow = \"0 10px 30px rgba(0,0,0,.15)\";\n  menu.style.padding = \"8px 0\";\n  menu.style.width = \"180px\";\n  menu.style.zIndex = \"9999\";\n  menu.style.fontSize = \"14px\";\n\n  menu.innerHTML = `\n    <div class=\"ms-menu-item\" data-action=\"delete\">🗑 Delete</div>\n  `;\n\n  document.body.appendChild(menu);\n\n  // 點外面關閉\n  setTimeout(()=>{\n    document.addEventListener(\"click\", () => menu.remove(), { once:true });\n  }, 10);\n\n  // 點擊選單項目\n  menu.addEventListener(\"click\", async (e)=>{\n    const action = e.target.dataset.action;\n    if(action === \"delete\"){\n      await fetch(window.MS_REST.root + \"momentry/v1/delete-thread/\" + id, {\n        method:\"DELETE\",\n        headers:{ \"X-WP-Nonce\":window.MS_REST.nonce }\n      });\n\n      // 從畫面移除\n      document.querySelector(`.ms-history-item[data-id=\"${id}\"]`)?.remove();\n      document.getElementById(\"chatMessages\").innerHTML=\"\";\n      window.currentThreadId = null;\n      menu.remove();\n    }\n  });\n}\n\n// 點 ⋯ 打開選單\ndocument.addEventListener(\"click\", function(e){\n  if(!e.target.classList.contains(\"ms-history-menu\")) return;\n\n  const item = e.target.closest(\".ms-history-item\");\n  const id = item.dataset.id;\n\n  const rect = e.target.getBoundingClientRect();\n  createHistoryMenu(rect.left - 140, rect.bottom + 6, id);\n});\n\n\n  // New Chat\n  document.getElementById(\"msNewChat\")?.addEventListener(\"click\", function(){\n    window.currentThreadId = null;\n    document.getElementById(\"chatMessages\").innerHTML = \"\";\n    document.querySelectorAll(\".ms-history-item\").forEach(i=>i.classList.remove(\"active\"));\n  });\n\n  const history = await msLoadHistory();\n  msRenderHistory(history);\n	\n	/* ===== 使用者頭像下拉選單控制 ===== */\nconst avatarBtn = document.getElementById(\"gsAvatarBtn\");\nconst userMenu  = document.getElementById(\"gsUserMenu\");\n\nif (avatarBtn && userMenu) {\n\n  avatarBtn.addEventListener(\"click\", function(e){\n    e.stopPropagation();\n    userMenu.classList.toggle(\"show\");\n  });\n\n  document.addEventListener(\"click\", function(e){\n    if (!e.target.closest(\".gs-user\")) {\n      userMenu.classList.remove(\"show\");\n    }\n  });\n\n}\n\n});\n</script>\n\n\n\n  <div class=\"ms-app\">\n\n    <aside class=\"ms-side\">\n\n      <div class=\"gs-logo\">Momentry Studio</div>\n\n      <div class=\"gs-nav\">\n        <a href=\"/ai-studio/\" class=\"<?php echo is_page(\'ai-studio\') ? \'active\' : \'\'; ?>\">🏠 Home</a>\n        <a href=\"/playground/\" class=\"<?php echo is_page(\'playground\') ? \'active\' : \'\'; ?>\">🧠 Playground</a>\n      </div>\n	  \n	  <div class=\"gs-divider\"></div>\n\n<!-- ⭐ Search History 區塊 -->\n\n<div style=\"display:flex;justify-content:space-between;align-items:center;padding:0 10px 6px;\">\n  <span style=\"font-size:11px;color:#9aa0a6;text-transform:uppercase;\">Search History</span>\n  <span id=\"msNewChat\" style=\"font-size:12px;color:#1967d2;cursor:pointer;\">＋ New</span>\n</div>\n\n<div id=\"msHistoryList\" style=\"display:flex;flex-direction:column;gap:4px;padding:0 6px 6px 6px;\"></div>\n\n\n\n\n      <div class=\"gs-divider\"></div>\n\n      <div class=\"gs-nav\">\n        <a href=\"#\">📄 Documentation</a>\n      </div>\n\n      <div class=\"gs-divider\"></div>\n\n      <div class=\"gs-nav\">\n        <a href=\"#\">🔑 API Keys</a>\n        <a href=\"#\">⚙️ Settings</a>\n      </div>\n\n      <!-- 使用者 -->\n      <?php if (is_user_logged_in()) :\n        $u = wp_get_current_user();\n        $avatar = get_avatar_url($u->ID, [\'size\' => 96]); ?>\n\n        <div class=\"gs-user\">\n          <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar\" id=\"gsAvatarBtn\" />\n       <div class=\"gs-user-info\">\n  <div class=\"gs-user-name\"><?php echo esc_html($u->display_name); ?></div>\n  <div class=\"gs-user-plan\">\n    <?php\n      if (in_array(\'administrator\', $u->roles)) echo \'Admin\';\n      elseif (in_array(\'editor\', $u->roles)) echo \'Editor\';\n      elseif (in_array(\'subscriber\', $u->roles)) echo \'Member\';\n      else echo \'User\';\n    ?>\n  </div>\n</div>\n\n\n          <div class=\"gs-user-menu\" id=\"gsUserMenu\">\n            <div class=\"gs-user-card\">\n              <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar-lg\" />\n              <div>\n                <div class=\"gs-user-name\"><?php echo esc_html($u->display_name); ?></div>\n                <div class=\"gs-user-handle\">@<?php echo esc_html($u->user_login); ?></div>\n              </div>\n            </div>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"/upgrade-plan/\" class=\"gs-menu-item\">⭐ Upgrade plan</a>\n            <a href=\"/personalization/\" class=\"gs-menu-item\">🎨 Personalization</a>\n            <a href=\"/settings/\" class=\"gs-menu-item\">⚙ Settings</a>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"/help/\" class=\"gs-menu-item\">❓ Help</a>\n        <a href=\"<?php echo esc_url(wp_logout_url(home_url(\'/ai-studio/\'))); ?>\" class=\"gs-menu-item logout\">🚪 Log out</a>\n\n          </div>\n        </div>\n\n      <?php else : ?>\n\n        <a href=\"<?php echo esc_url(wp_login_url(home_url(\'/playground\'))); ?>\" class=\"gs-user\">\n          <div class=\"gs-avatar\">👤</div>\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-email\">Sign in to Momentry</div>\n            <div class=\"gs-user-status\">Access your AI workspace</div>\n          </div>\n        </a>\n\n      <?php endif; ?>\n\n    </aside>\n\n    <main class=\"ms-main\">\n      <?php echo $content; ?>\n    </main>\n\n  </div>\n\n  <?php\n  return ob_get_clean();\n\n}, 99);\n','','global',0,10,1,'2026-05-05 09:47:44',1,NULL),
(29,'Test Mar','','function custom_marquee_banner() {\n    ob_start(); ?>\n    \n    <div class=\"top-marquee\">\n        <div class=\"marquee-content\">\n            🚀 Momentry Studio 正式發表 ｜ 🎬 AI 影音資產搜尋新時代 ｜ 💡 COMPUTEX 展位歡迎體驗\n        </div>\n    </div>\n\n    <style>\n    .top-marquee {\n        width: 100%;\n        overflow: hidden;\n        background: white;\n        color: black;\n        padding: 10px 0;\n        font-size: 14px;\n        position: relative;\n    }\n\n    .marquee-content {\n        display: inline-block;\n        white-space: nowrap;\n        padding-left: 100%;\n        animation: marquee 15s linear infinite;\n    }\n\n    @keyframes marquee {\n        0%   { transform: translateX(0); }\n        100% { transform: translateX(-100%); }\n    }\n    </style>\n\n    <?php return ob_get_clean();\n}\nadd_shortcode(\'top_marquee\', \'custom_marquee_banner\');\n','','global',0,10,-1,'2026-02-05 02:17:53',1,NULL),
(30,'Momentry – Search History API','','/* ---------- SHORTCODE ---------- */\nadd_shortcode(\'momentry_rest_bootstrap\', function () {\n  if (!is_user_logged_in()) return \'\';\n  return \"<script>\n    window.MS_REST = {\n      root: \'\".esc_url_raw(rest_url()).\"\',\n      nonce: \'\".wp_create_nonce(\'wp_rest\').\"\'\n    };\n  </script>\";\n});\n\n\ndefined(\'ABSPATH\') || exit;\n\n/* ---------- DB TABLE ---------- */\nfunction ms_table_name() {\n  global $wpdb;\n  return $wpdb->prefix . \'momentry_search_sessions\';\n}\n\nadd_action(\'init\', function () {\n  global $wpdb;\n  $table = ms_table_name();\n\n  if ($wpdb->get_var(\"SHOW TABLES LIKE \'$table\'\") === $table) return;\n\n  require_once ABSPATH . \'wp-admin/includes/upgrade.php\';\n  dbDelta(\"CREATE TABLE $table (\n    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,\n    user_id BIGINT UNSIGNED NOT NULL,\n    parent_id BIGINT UNSIGNED NULL,\n    query_text LONGTEXT NOT NULL,\n    scope_text VARCHAR(190) NULL,\n    answer_text LONGTEXT NULL,\n    sources_json LONGTEXT NULL,\n    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n    KEY parent_id (parent_id),\n    KEY user_id (user_id)\n  ) {$wpdb->get_charset_collate()};\");\n});\n\n/* ---------- AUTH ---------- */\nfunction ms_require_logged_in() {\n  return is_user_logged_in();\n}\n\n/* ---------- REST ROUTES ---------- */\nadd_action(\'rest_api_init\', function () {\n\n  global $wpdb;\n  $table = ms_table_name();\n\n  /* Save message */\n  register_rest_route(\'momentry/v1\', \'/save-search\', [\n  \'methods\'=>\'POST\',\n  \'permission_callback\'=>\'ms_require_logged_in\',\n  \'callback\'=>function($req) use ($wpdb,$table){\n\n    $body = $req->get_json_params();   // ⭐ 正確讀 JSON\n\n    $user_id = get_current_user_id();\n    $query   = trim($body[\'query\'] ?? \'\');\n    if(!$query) return [\'ok\'=>false];\n\n    $parent_id = !empty($body[\'parent_id\']) ? (int)$body[\'parent_id\'] : null;\n\n    $wpdb->insert($table,[\n      \'user_id\'=>$user_id,\n      \'parent_id\'=>$parent_id,\n      \'query_text\'=>$query,\n      \'scope_text\'=>$body[\'scope\'] ?? null,\n      \'answer_text\'=>$body[\'answer\'] ?? null,\n      \'sources_json\'=>!empty($body[\'sources\']) ? wp_json_encode($body[\'sources\']) : null\n    ]);\n\n    return [\'ok\'=>true,\'id\'=>$wpdb->insert_id];\n  }\n]);\n\n\n  /* List threads (only root messages) */\n  register_rest_route(\'momentry/v1\', \'/search-history\', [\n    \'methods\'=>\'GET\',\n    \'permission_callback\'=>\'ms_require_logged_in\',\n    \'callback\'=>function() use ($wpdb,$table){\n      $uid=get_current_user_id();\n\n      $rows = $wpdb->get_results(\n        $wpdb->prepare(\"SELECT id, query_text AS query \n                        FROM $table \n                        WHERE user_id=%d AND parent_id IS NULL \n                        ORDER BY id DESC\",$uid),\n        ARRAY_A);\n\n      return [\'ok\'=>true,\'data\'=>$rows];\n    }\n  ]);\n/* Rename thread (only root message) */\nregister_rest_route(\'momentry/v1\', \'/rename-thread/(?P<id>\\d+)\', [\n  \'methods\'=>\'POST\',\n  \'permission_callback\'=>\'ms_require_logged_in\',\n  \'callback\'=>function($req) use ($wpdb,$table){\n    $uid=get_current_user_id();\n    $id=(int)$req[\'id\'];\n    $title=sanitize_text_field($req[\'title\']);\n\n    $updated=$wpdb->update(\n      $table,\n      [\'query_text\'=>$title],\n      [\'id\'=>$id,\'user_id\'=>$uid,\'parent_id\'=>null]\n    );\n\n    return [\'ok\'=>(bool)$updated];\n  }\n]);\n\n/* Delete thread (root + children) */\nregister_rest_route(\'momentry/v1\', \'/delete-thread/(?P<id>\\d+)\', [\n  \'methods\'=>\'DELETE\',\n  \'permission_callback\'=>\'ms_require_logged_in\',\n  \'callback\'=>function($req) use ($wpdb,$table){\n    $uid=get_current_user_id();\n    $id=(int)$req[\'id\'];\n\n    $wpdb->query($wpdb->prepare(\n      \"DELETE FROM $table WHERE (id=%d OR parent_id=%d) AND user_id=%d\",\n      $id,$id,$uid\n    ));\n\n    return [\'ok\'=>true];\n  }\n]);\n\n  /* Load a full thread */\n  register_rest_route(\'momentry/v1\', \'/search-thread/(?P<id>\\d+)\', [\n    \'methods\'=>\'GET\',\n    \'permission_callback\'=>\'ms_require_logged_in\',\n    \'callback\'=>function($req) use ($wpdb,$table){\n\n      $uid=get_current_user_id();\n      $id=(int)$req[\'id\'];\n\n      $messages = $wpdb->get_results(\n        $wpdb->prepare(\"SELECT query_text AS query, answer_text AS answer \n                        FROM $table \n                        WHERE (id=%d OR parent_id=%d) AND user_id=%d \n                        ORDER BY id ASC\",$id,$id,$uid),\n        ARRAY_A);\n\n      return [\'ok\'=>true,\'data\'=>[\'messages\'=>$messages]];\n    }\n  ]);\n\n});\n','','global',0,10,1,'2026-02-06 10:12:20',1,NULL),
(31,'Momentry Moments Wall','','add_action(\'wp_footer\', function () {\n?>\n<style>\n#momentry-app {\n  background:#0f172a;\n  color:white;\n  font-family:-apple-system,BlinkMacSystemFont,sans-serif;\n}\n#playerContainer {\n  padding:20px;\n  text-align:center;\n  background:#0b1220;\n  position:sticky;\n  top:0;\n  z-index:10;\n}\n#player {\n  width:70%;\n  max-height:60vh;\n  border-radius:12px;\n}\n#grid {\n  display:grid;\n  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));\n  gap:16px;\n  padding:20px;\n}\n.card {\n  background:#1e293b;\n  padding:12px;\n  border-radius:12px;\n  cursor:pointer;\n  transition:.2s;\n  text-align:center;\n  font-size:14px;\n}\n.card:hover {\n  transform:scale(1.06);\n  background:#334155;\n}\n.card.active {\n  outline:2px solid #3b82f6;\n}\n</style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\nconst ACCESS_TOKEN = \"sl.u.AGSjbcivY4SJVxkncStiRb6t4wT9vnwE7XMxjiMlSTYiKh6jf2BQTiZfncOYa99UKPCnYqFmYCyMSogKll-XXJ4rRyDfoQso15wcXRRWpXtRxzhwVQdSPQIPJ1wrEOKgdlUfAemk3skt3PTa6ACmjqWFsQ8SWS5bgjkWtmq198AOJtnAaATNofmUTTtQkq9cZ4Nvy6fa9MEd7V4F7s4wsQZPaBFkG2-dtTZQXLshHrj53jM0WBcJAKvWUGqvyzYORtpP7lXMXKf5WGIyTwsorhO3vJoOkUzioqYMlRx2cZULHNi1bxlQvsWqc_NB7jMcUCxB7StShnDWYlLM5yPTfHQF8kMpbFe40lmJzR0xN1grfaVExp-Kg7ny3-4pElNDXYTVleFH5cSTRKnHyaHRvvoU93aBxYjx44MR-WVe30R2-C-_Tq8GWeT5v73CraUlYjGyDNViVaFkWxA0im8AtBw8lUgFLurqjIk3L4N2zkXQ5OcStVxvDLeXmIiQjPgEWO5Ve_WP0LUISVkvag9EgOi7v0BcFbvjwF4pGqjXRXeQ3iDqpWTV2aFZ3JFD82UfZdEtPJcxvS4r-ajrs0p-7de3XGP4paIahQZKumhMAnLfYKjJ0ZridjkICJ6PZVllrMGkyRb6Hg1ysF0EKvrqoOh161N18k_Qy5Ylq7j6o_QEvioVYHelFLBcrg2-mVtaukDSk54FIDLEIDjS-8ybx3wKrbqynYsLflfQJ1TH8dk4s8CNyGNOwCsH70Smt6EuEZlkmO6bqdav31mdlUA3U6t_4baVbfndiDsWkVSV8axiGJyGqbrlgg9jaquPUfStSzIZbCoHIB8kaBevU5C-q7-_YV9jRh_bU3POh6AJKEKvqFKn8luzDzi3yqzjh-AfQ6yv_VOXb71CjBTPeLVa5Vl5kP3QSH1zK9sNR_mEmVCgOxJ7bLPHA9uNfsCsx8tsLHEIePWUGZ7psHsJAPBf7l1jE5KWiECx7Kc3DvKVUd9K0rqkhtuqdvUPxDckshKp_Apn3YaqAD6GjZNgMKSHzm5Q8l2dRd8pwxu2WRrutLI-qr2NNaKvsQHhkS3S9kO7PPbjeIpbTYjH2k2oWN_Rc0lyYXqWWYV2lI_3INXulLM6W5FjYRyF-FON9zZLgjPpsrDk9SFvh_gpvHfmi7j5vWtWqi-AfkY_GeLdicprWmUX4mOgBq2o9ReaBcUQ_j9MC3RkEU3MV-uYQFGLYkYFfwdrVUNogJA3mBfPW5keRqiw5qBBHkiNsBVc8SwUstWhkTorTaAliEW3SRp7Z6dXf_9ZL7pIpOFJg2cUEdiTGAu6uQ\";\nconst FOLDER_PATH = \"\"; // App folder 根目錄\n\nlet moments = [];\nlet current = 0;\n\nconst player = document.getElementById(\"player\");\nconst grid = document.getElementById(\"grid\");\nif(!player || !grid) return;\n\nplayer.muted = true;\n\nasync function loadMomentsFromDropbox(){\n\n  const res = await fetch(\"https://api.dropboxapi.com/2/files/list_folder\", {\n    method: \"POST\",\n    headers: {\n      \"Authorization\": \"Bearer \" + ACCESS_TOKEN,\n      \"Content-Type\": \"application/json\"\n    },\n    body: JSON.stringify({ path: FOLDER_PATH, recursive: true })\n  });\n\n  const data = await res.json();\n\n  if (!data.entries) {\n    console.error(\"Dropbox API error:\", data);\n    grid.innerHTML = \"<div style=\'color:red\'>Dropbox 讀取失敗，請檢查 token 或權限</div>\";\n    return;\n  }\n\n  const videoFiles = data.entries.filter(f =>\n    f.path_lower.includes(\"/moments/\") && f.name.endsWith(\".mp4\")\n  );\n\n  for (const file of videoFiles) {\n    const linkRes = await fetch(\"https://api.dropboxapi.com/2/files/get_temporary_link\", {\n      method: \"POST\",\n      headers: {\n        \"Authorization\": \"Bearer \" + ACCESS_TOKEN,\n        \"Content-Type\": \"application/json\"\n      },\n      body: JSON.stringify({ path: file.path_lower })\n    });\n\n    const linkData = await linkRes.json();\n\n    moments.push({\n      name: file.name,\n      url: linkData.link\n    });\n  }\n\n  buildGrid();\n  loadMoment(0);\n}\n\nfunction buildGrid(){\n  grid.innerHTML = \"\";\n  moments.forEach((m, index) => {\n    const card = document.createElement(\"div\");\n    card.className = \"card\";\n\n    const clean = m.name.replace(\".mp4\",\"\");\n    const parts = clean.split(\"_moment\");\n    const label = `${parts[0]} ｜ Moment ${parts[1]}`;\n\n    card.innerText = label;\n    card.onclick = () => loadMoment(index);\n    grid.appendChild(card);\n  });\n}\n\nfunction highlightCard(index){\n  document.querySelectorAll(\".card\").forEach((c,i)=>{\n    c.classList.toggle(\"active\", i===index);\n  });\n}\n\nfunction loadMoment(index){\n  current = index % moments.length;\n  const m = moments[current];\n\n  player.src = m.url;\n  player.muted = true;\n  player.play().catch(e => console.log(\"Autoplay blocked:\", e));\n  highlightCard(current);\n}\n\nfunction nextMoment(){\n  loadMoment(current+1);\n}\n\nplayer.addEventListener(\"ended\", nextMoment);\n\nloadMomentsFromDropbox();\n\n});\n</script>\n\n\n<?php\n});\n','','front-end',0,10,-1,'2026-02-12 01:58:07',1,NULL),
(32,'Transcript Search','','function momentry_transcript_search() {\n\n    ob_start();\n\n    $upload_dir = wp_upload_dir();\n    $base_path = $upload_dir[\'basedir\'] . \'/2026/02/\';\n\n    ?>\n\n    <form method=\"get\">\n        <input type=\"text\" name=\"ts_keyword\" placeholder=\"輸入關鍵字搜尋會議逐字稿\" style=\"width:300px;padding:6px;\">\n        <input type=\"submit\" value=\"搜尋\" style=\"padding:6px 12px;\">\n    </form>\n\n    <hr>\n\n    <?php\n\n    if (isset($_GET[\'ts_keyword\']) && !empty($_GET[\'ts_keyword\'])) {\n\n        $keyword = sanitize_text_field($_GET[\'ts_keyword\']);\n        echo \"<h3>搜尋結果：「\" . esc_html($keyword) . \"」</h3>\";\n\n        $files = glob($base_path . \"*_transcript.txt\");\n\n        $found = false;\n\n        foreach ($files as $file) {\n\n            $content = file($file);\n\n            foreach ($content as $line) {\n\n                if (stripos($line, $keyword) !== false) {\n\n                    $found = true;\n\n                    $filename = basename($file);\n                    $meeting_name = str_replace(\"_transcript.txt\", \"\", $filename);\n\n                    echo \"<div style=\'margin-bottom:10px;padding:8px;border-bottom:1px solid #ddd;\'>\";\n                    echo \"<strong>\" . esc_html($meeting_name) . \"</strong><br>\";\n                    echo esc_html(trim($line));\n                    echo \"</div>\";\n                }\n            }\n        }\n\n        if (!$found) {\n            echo \"<p>沒有找到相關內容。</p>\";\n        }\n    }\n\n    return ob_get_clean();\n}\n\nadd_shortcode(\'transcript_search\', \'momentry_transcript_search\');\n','','global',0,10,-1,'2026-02-12 10:31:22',1,NULL),
(33,'LT- Layer Bar','','add_filter(\'the_content\', function ($content) {\n\n  if (!is_page([\'lt-searching\', \'ww-4-7\', \'momentry-demo\',\'lt-upgrade-plan\',\'lt-personalization\',\'lt-settings\',\'lt-help\',\'ww-04-07-api\'])) return $content;\n\n  ob_start(); ?>\n\n  <style>\n    html, body {\n      background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 40%, #e9eff8 100%) !important;\n    }\n\n    html, body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    }\n\n    .ms-app {\n      display: flex;\n      height: 96vh;\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 28px;\n      gap: 28px;\n      box-sizing: border-box;\n    }\n\n    .ms-side {\n      width: 240px;\n      min-width: 240px;\n      flex-shrink: 0;\n      background: #fff;\n      border-radius: 18px;\n      padding: 18px 14px;\n      box-shadow: 0 4px 18px rgba(0,0,0,0.05);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .gs-logo {\n      font-size: 15px;\n      font-weight: 600;\n      color: #202124;\n      padding: 8px 12px 16px 12px;\n    }\n\n    .gs-nav {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .gs-nav a {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 10px;\n      text-decoration: none;\n      color: #3c4043;\n      font-weight: 500;\n      transition: .15s ease;\n    }\n\n    .gs-nav a:hover {\n      background: #f1f3f4;\n    }\n\n    .gs-nav a.active {\n      background: #e8f0fe;\n      color: #1967d2;\n      font-weight: 600;\n    }\n\n    .gs-divider {\n      height: 1px;\n      background: #eee;\n      margin: 14px 8px;\n    }\n\n    .ms-main {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border-radius: 0;\n      padding: 36px 42px;\n      box-shadow: none;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n\n    /* ===== Search History ===== */\n    .ms-history-item {\n      padding: 8px 10px;\n      border-radius: 8px;\n      font-size: 12px;\n      color: #3c4043;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .ms-history-item:hover {\n      background: #f1f3f4;\n    }\n\n    .ms-history-item.active {\n      background: #e8f0fe;\n      color: #1967d2;\n      font-weight: 600;\n    }\n\n    .ms-history-title {\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      flex: 1;\n    }\n\n    .ms-history-menu {\n      font-size: 14px;\n      color: #999;\n      margin-left: 6px;\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .ms-menu-item {\n      padding: 10px 16px;\n      cursor: pointer;\n    }\n\n    .ms-menu-item:hover {\n      background: #f5f6f8;\n    }\n\n    .ms-menu-item[data-action=\"delete\"] {\n      color: #d93025;\n      font-weight: 600;\n    }\n\n    /* ===== 使用者區塊 ===== */\n    .gs-user {\n      margin-top: auto;\n      padding: 10px 12px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      background: #f8f9fa;\n      cursor: pointer;\n      position: relative;\n    }\n\n    .gs-avatar {\n      width: 34px;\n      height: 34px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n    }\n\n    .gs-user-info {\n      font-size: 12px;\n      line-height: 1.2;\n      min-width: 0;\n    }\n\n    .gs-user-name {\n      font-size: 13px;\n      font-weight: 600;\n      color: #202124;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .gs-user-plan {\n      font-size: 11px;\n      color: #5f6368;\n    }\n\n    /* ===== 帳戶下拉選單 ===== */\n    .gs-user-menu {\n      display: none;\n      position: absolute;\n      bottom: 54px;\n      left: 0;\n      width: 260px;\n      background: #fff;\n      border-radius: 18px;\n      box-shadow: 0 12px 40px rgba(0,0,0,.15);\n      border: 1px solid #e6e8eb;\n      padding: 10px 0;\n      z-index: 999;\n    }\n\n    .gs-user-menu.show {\n      display: block;\n    }\n\n    .gs-user-card {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n    }\n\n    .gs-avatar-lg {\n      width: 42px;\n      height: 42px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n    }\n\n    .gs-user-card-name {\n      font-weight: 600;\n      font-size: 15px;\n      color: #202124;\n    }\n\n    .gs-user-handle {\n      font-size: 13px;\n      color: #777;\n    }\n\n    .gs-menu-divider {\n      height: 1px;\n      background: #eee;\n      margin: 8px 0;\n    }\n\n    .gs-menu-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 18px;\n      text-decoration: none;\n      color: #222;\n      font-size: 14px;\n    }\n\n    .gs-menu-item:hover {\n      background: #f3f4f6;\n    }\n\n    .gs-menu-item.logout {\n      color: #c62828;\n    }\n\n    /* 外框 */\n    .site,\n    .site-content,\n    .content-area {\n      background: transparent !important;\n      border-radius: 28px !important;\n      overflow: hidden;\n      box-shadow: 0 25px 70px rgba(0,0,0,.06);\n    }\n  </style>\n\n <script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  /* ===== 使用者頭像 / 帳號區塊下拉選單 ===== */\n  const avatarBtn = document.getElementById(\"gsAvatarBtn\");\n  const userMenu = document.getElementById(\"gsUserMenu\");\n\n  if (avatarBtn && userMenu) {\n    avatarBtn.addEventListener(\"click\", function (e) {\n      e.stopPropagation();\n      userMenu.classList.toggle(\"show\");\n    });\n\n    document.addEventListener(\"click\", function (e) {\n      if (!e.target.closest(\".gs-user\")) {\n        userMenu.classList.remove(\"show\");\n      }\n    });\n  }\n\n  const STORAGE_KEY = \"ms_search_history_v1\";\n\n  function getHistory() {\n    try {\n      const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) || \"[]\");\n      return raw.sort((a, b) => {\n        if (!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1;\n        return new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0);\n      });\n    } catch (err) {\n      console.error(\"Read history failed:\", err);\n      return [];\n    }\n  }\n\n  function saveHistory(items) {\n    try {\n      localStorage.setItem(STORAGE_KEY, JSON.stringify(items));\n    } catch (err) {\n      console.error(\"Save history failed:\", err);\n    }\n  }\n\n  function renderHistory(items) {\n    const list = document.getElementById(\"msHistoryList\");\n    if (!list) return;\n\n    if (!items.length) {\n      list.innerHTML = \'<div style=\"font-size:12px;color:#999;padding:6px 12px;\">No history yet</div>\';\n      return;\n    }\n\n    list.innerHTML = items.map(it => `\n      <div class=\"ms-history-item ${it.pinned ? \'is-pinned\' : \'\'}\" data-id=\"${it.id}\">\n        <span class=\"ms-history-title\">\n          ${it.pinned ? \'<span style=\"margin-right:6px;\">📌</span>\' : \'\'}\n          ${it.title || it.query || \"Untitled\"}\n        </span>\n        <span class=\"ms-history-menu\">⋯</span>\n      </div>\n    `).join(\"\");\n  }\n\n  function refreshHistory() {\n    renderHistory(getHistory());\n  }\n\n  function createHistoryMenu(x, y, id) {\n    const old = document.getElementById(\"msHistoryDropdown\");\n    if (old) old.remove();\n\n    const items = getHistory();\n    const current = items.find(x => String(x.id) === String(id));\n    const isPinned = current ? !!current.pinned : false;\n\n    const menu = document.createElement(\"div\");\n    menu.id = \"msHistoryDropdown\";\n    menu.style.position = \"fixed\";\n    menu.style.top = y + \"px\";\n    menu.style.left = x + \"px\";\n    menu.style.background = \"#fff\";\n    menu.style.borderRadius = \"14px\";\n    menu.style.boxShadow = \"0 10px 30px rgba(0,0,0,.15)\";\n    menu.style.padding = \"8px 0\";\n    menu.style.width = \"180px\";\n    menu.style.zIndex = \"9999\";\n    menu.style.fontSize = \"14px\";\n\n    menu.innerHTML = `\n      <div class=\"ms-menu-item\" data-action=\"pin\">${isPinned ? \"📌 Unpin\" : \"📌 Pin\"}</div>\n      <div class=\"ms-menu-item\" data-action=\"rename\">✏️ Rename</div>\n      <div class=\"ms-menu-item\" data-action=\"delete\">🗑 Delete</div>\n    `;\n\n    document.body.appendChild(menu);\n\n    setTimeout(() => {\n      document.addEventListener(\"click\", () => menu.remove(), { once: true });\n    }, 10);\n\n    menu.addEventListener(\"click\", function (e) {\n      const action = e.target.dataset.action;\n      if (!action) return;\n\n      let items = getHistory();\n      const idx = items.findIndex(x => String(x.id) === String(id));\n      if (idx === -1) {\n        menu.remove();\n        return;\n      }\n\n      if (action === \"delete\") {\n        items.splice(idx, 1);\n        saveHistory(items);\n        refreshHistory();\n        window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n      }\n\n      if (action === \"rename\") {\n        const oldTitle = items[idx].title || items[idx].query || \"\";\n        const newTitle = prompt(\"Rename this chat:\", oldTitle);\n        if (newTitle && newTitle.trim()) {\n          items[idx].title = newTitle.trim();\n          items[idx].updatedAt = new Date().toISOString();\n          saveHistory(items);\n          refreshHistory();\n          window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n        }\n      }\n\n      if (action === \"pin\") {\n        items[idx].pinned = !items[idx].pinned;\n        items[idx].updatedAt = new Date().toISOString();\n\n        items.sort((a, b) => {\n          if (!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1;\n          return new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0);\n        });\n\n        saveHistory(items);\n        refreshHistory();\n        window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n      }\n\n      menu.remove();\n    });\n  }\n\n  document.addEventListener(\"click\", function (e) {\n    const menuBtn = e.target.closest(\".ms-history-menu\");\n    if (menuBtn) {\n      e.stopPropagation();\n      const item = menuBtn.closest(\".ms-history-item\");\n      if (!item) return;\n\n      const id = item.dataset.id;\n      const rect = menuBtn.getBoundingClientRect();\n      createHistoryMenu(rect.left - 140, rect.bottom + 6, id);\n      return;\n    }\n\n    const item = e.target.closest(\".ms-history-item\");\n    if (!item) return;\n\n    document.querySelectorAll(\".ms-history-item\").forEach(i => i.classList.remove(\"active\"));\n    item.classList.add(\"active\");\n\n    const id = item.dataset.id;\n    const items = getHistory();\n    const record = items.find(x => String(x.id) === String(id));\n    if (!record) return;\n\n    try {\n      sessionStorage.setItem(\"ms_chat_html\", record.chatHtml || \"\");\n      sessionStorage.setItem(\"ms_last_query\", record.query || \"\");\n      sessionStorage.setItem(\"ms_selected_history_id\", String(record.id));\n    } catch (err) {\n      console.error(\"Session save failed:\", err);\n    }\n\n    window.location.href = \"/ww-4-7/?restore=1\";\n  });\n\n  document.getElementById(\"msNewChat\")?.addEventListener(\"click\", function () {\n    try {\n      sessionStorage.removeItem(\"ms_chat_html\");\n      sessionStorage.removeItem(\"ms_last_query\");\n      sessionStorage.removeItem(\"ms_selected_history_id\");\n    } catch (err) {}\n\n    document.querySelectorAll(\".ms-history-item\").forEach(i => i.classList.remove(\"active\"));\n    window.location.href = \"/ww-4-7/\";\n  });\n\n  /* ===== 即時同步：同頁自訂事件 ===== */\n  window.addEventListener(\"ms-history-updated\", function () {\n    refreshHistory();\n  });\n\n  /* ===== 即時同步：跨頁 / storage 更新 ===== */\n  window.addEventListener(\"storage\", function (e) {\n    if (e.key === STORAGE_KEY) {\n      refreshHistory();\n    }\n  });\n\n  refreshHistory();\n});\n</script>\n\n  <div class=\"ms-app\">\n\n    <aside class=\"ms-side\">\n\n      <div class=\"gs-logo\">Momentry Studio</div>\n\n      <div class=\"gs-nav\">\n        <a href=\"/lt-searching/\" class=\"<?php echo is_page(\'lt-searching\') ? \'active\' : \'\'; ?>\">🏠 Home</a>\n      </div>\n\n      <div class=\"gs-divider\"></div>\n\n      <div style=\"display:flex;justify-content:space-between;align-items:center;padding:0 10px 6px;\">\n        <span style=\"font-size:11px;color:#9aa0a6;text-transform:uppercase;\">Search History</span>\n        <span id=\"msNewChat\" style=\"font-size:12px;color:#1967d2;cursor:pointer;\">＋ New</span>\n      </div>\n\n      <div id=\"msHistoryList\" style=\"display:flex;flex-direction:column;gap:4px;padding:0 6px 6px 6px;\"></div>\n\n      <?php if (is_user_logged_in()) :\n        $u = wp_get_current_user();\n        $avatar = get_avatar_url($u->ID, [\'size\' => 96]); ?>\n\n        <div class=\"gs-user\" id=\"gsAvatarBtn\">\n          <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar\" alt=\"avatar\" />\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\"><?php echo esc_html($u->display_name); ?></div>\n            <div class=\"gs-user-plan\">\n              <?php\n                if (in_array(\'administrator\', $u->roles)) echo \'Admin\';\n                elseif (in_array(\'editor\', $u->roles)) echo \'Editor\';\n                elseif (in_array(\'subscriber\', $u->roles)) echo \'Member\';\n                else echo \'User\';\n              ?>\n            </div>\n          </div>\n\n          <div class=\"gs-user-menu\" id=\"gsUserMenu\">\n            <div class=\"gs-user-card\">\n              <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar-lg\" alt=\"avatar large\" />\n              <div>\n                <div class=\"gs-user-card-name\"><?php echo esc_html($u->display_name); ?></div>\n                <div class=\"gs-user-handle\">@<?php echo esc_html($u->user_login); ?></div>\n              </div>\n            </div>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"lt-upgrade-plan\" class=\"gs-menu-item\">⭐ Upgrade plan</a>\n            <a href=\"/lt-🎨-personalization/\" class=\"gs-menu-item\">🎨 Personalization</a>\n            <a href=\"/lt-settings/\" class=\"gs-menu-item\">⚙ Settings</a>\n\n           <div class=\"gs-menu-divider\"></div>\n\n\n<a href=\"/lt-help/\" class=\"gs-menu-item\">❓ Help</a>\n<a href=\"<?php echo esc_url(wp_logout_url(wp_login_url(home_url(\'/lt-searching/\')))); ?>\" class=\"gs-menu-item\">🔄 Switch account</a>\n<a href=\"<?php echo esc_url(wp_logout_url(home_url(\'/lt-searching/\'))); ?>\" class=\"gs-menu-item logout\">🚪 Log out</a>\n          </div>\n        </div>\n\n      <?php else : ?>\n\n        <a href=\"<?php echo esc_url(wp_login_url(home_url(\'/lt-searching\'))); ?>\" class=\"gs-user\">\n          <div class=\"gs-avatar\">👤</div>\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\">Sign in to Momentry</div>\n            <div class=\"gs-user-plan\">Access your AI workspace</div>\n          </div>\n        </a>\n\n      <?php endif; ?>\n\n    </aside>\n\n    <main class=\"ms-main\">\n      <?php echo $content; ?>\n    </main>\n\n  </div>\n\n  <?php\n  return ob_get_clean();\n\n}, 99);','','global',0,10,-1,'2026-03-18 08:35:27',1,NULL),
(34,'LT-8、9','','add_action(\'wp_footer\', function () {\n  if (!is_page([\'lt-8、9\'])) return;\n  ?>\n  <script>\n  (function () {\n    function init() {\n      try {\n        const MEDIA = [\n          {id:1, type:\'image\',title:\'城市街道夜景\',file:\'city_night_001.jpg\',folder:\'旅遊/城市\',snippet:\'霓虹燈映照下的繁華街道，人群熙攘，充滿都市活力\',time:\'2026/01/04\',timeMs:new Date(\'2026/01/04\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\',source:\'本地資料夾\',sizeKB:3840,durationSec:0},\n          {id:2, type:\'image\',title:\'山頂雲海日出\',file:\'mountain_sunrise.jpg\',folder:\'自然/山景\',snippet:\'清晨山頂雲海翻騰，曙光穿透雲層，壯麗景觀\',time:\'2025/11/15\',timeMs:new Date(\'2025/11/15\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/2049b122306232e42f117f7203bbb939.jpg\',source:\'本地資料夾\',sizeKB:5200,durationSec:0},\n          {id:3, type:\'image\',title:\'海岸礁石風光\',file:\'coast_rocks.jpg\',folder:\'自然/海岸\',snippet:\'海浪拍打礁石，藍天白雲映照，天然海岸美景\',time:\'2025/08/22\',timeMs:new Date(\'2025/08/22\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\',source:\'本地資料夾\',sizeKB:2100,durationSec:0},\n          {id:4, type:\'image\',title:\'古典建築倒影\',file:\'ancient_arch.jpg\',folder:\'建築/古典\',snippet:\'古建築與現代城市融合，湖面倒影清晰，對比強烈\',time:\'2025/06/10\',timeMs:new Date(\'2025/06/10\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/76f951354df79af6011bc6d8fba12d88.jpg\',source:\'本地資料夾\',sizeKB:7800,durationSec:0},\n          {id:5, type:\'image\',title:\'森林步道晨光\',file:\'forest_morning.jpg\',folder:\'自然/森林\',snippet:\'陽光穿透樹梢灑落步道，空氣清新，森林靜謐\',time:\'2025/03/05\',timeMs:new Date(\'2025/03/05\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ffe86f4d085fa13f9a70e59c24a86a4b.jpg\',source:\'本地資料夾\',sizeKB:1540,durationSec:0},\n          {id:6, type:\'image\',title:\'花田繽紛色彩\',file:\'flower_field.jpg\',folder:\'自然/花卉\',snippet:\'大片花田盛開，色彩繽紛，蝴蝶飛舞其間\',time:\'2024/09/18\',timeMs:new Date(\'2024/09/18\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/785220f09814db1a8a0d2cf5c8ae9ef9.jpg\',source:\'本地資料夾\',sizeKB:4300,durationSec:0},\n          {id:7, type:\'image\',title:\'雪山冰川全景\',file:\'glacier_panorama.jpg\',folder:\'自然/雪山\',snippet:\'白雪皚皚的山峰，冰川延伸至遠方，壯闊無垠\',time:\'2024/05/30\',timeMs:new Date(\'2024/05/30\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6b8d1023a8434e4b78ca0b2d08244a36.jpg\',source:\'本地資料夾\',sizeKB:9200,durationSec:0},\n          {id:8, type:\'image\',title:\'沙漠日落剪影\',file:\'desert_sunset.jpg\',folder:\'自然/沙漠\',snippet:\'沙丘起伏間的夕陽剪影，金紅色天空令人屏息\',time:\'2024/01/12\',timeMs:new Date(\'2024/01/12\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ddb136a8ca8460894854d4e8444d1887.jpg\',source:\'本地資料夾\',sizeKB:6600,durationSec:0},\n          {id:9, type:\'video\',title:\'Outdoor Moment 橫式\',file:\'H_moment3.mp4\',folder:\'影片/戶外\',snippet:\'橫向影片片段，戶外動態景色，AI 識別風景場景\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\',duration:\'10:05\',durationSec:605,source:\'原始影音庫\',sizeKB:185000},\n          {id:10,type:\'video\',title:\'Outdoor Moment 直式\',file:\'O_moment3.mp4\',folder:\'影片/戶外\',snippet:\'直向影片片段，豐富自然元素，動感戶外記錄\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\',duration:\'10:05\',durationSec:605,source:\'原始影音庫\',sizeKB:210000},\n          {id:11,type:\'image\',title:\'自然山景倒影\',file:\'fuji_reflection.jpg\',folder:\'旅遊/日本\',snippet:\'富士山湖面倒影，秋季楓葉點綴，絕美風景\',time:\'2023/10/07\',timeMs:new Date(\'2023/10/07\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6a30a40dgy1hrmpykxf3wj224r3757wi.jpg\',source:\'本地資料夾\',sizeKB:12400,durationSec:0},\n          {id:12,type:\'image\',title:\'日落黃金草原\',file:\'golden_prairie.jpg\',folder:\'自然/草原\',snippet:\'夕陽金光灑落草原，雲彩渲染天空，壯闊自然\',time:\'2023/07/19\',timeMs:new Date(\'2023/07/19\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/lA7OhpEMRug-scaled.jpg\',source:\'本地資料夾\',sizeKB:8900,durationSec:0},\n          {id:13,type:\'image\',title:\'活動紀錄截圖\',file:\'screenshot_0123.png\',folder:\'活動/紀錄\',snippet:\'室內互動場景，人物神情自然，生動精彩記錄\',time:\'2026/01/23\',timeMs:new Date(\'2026/01/23\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ScreenShot_2026-01-23_170611_665-scaled.png\',source:\'本地資料夾\',sizeKB:980,durationSec:0},\n          {id:14,type:\'image\',title:\'品牌識別標誌\',file:\'Accusys-logo_s.png\',folder:\'品牌/素材\',snippet:\'企業品牌識別，清晰專業，適合商業展示使用\',time:\'2026/02/01\',timeMs:new Date(\'2026/02/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/02/Accusys-logo_s-1.png\',source:\'本地資料夾\',sizeKB:55,durationSec:0}\n        ];\n\n        const RECENTLY = [\n          {id:1,name:\'city_night_001.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\'},\n          {id:9,name:\'H_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\'},\n          {id:3,name:\'coast_rocks.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\'},\n          {id:10,name:\'O_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\'}\n        ];\n\n        const root = document.getElementById(\'msResultsRoot\');\n        if (!root) return;\n\n        const MIN_TIME = Math.min.apply(null, MEDIA.map(function(m){ return m.timeMs; }));\n        const MAX_TIME = Math.max.apply(null, MEDIA.map(function(m){ return m.timeMs; }));\n        const MAX_SIZE_KB = Math.max.apply(null, MEDIA.map(function(m){ return m.sizeKB || 0; }));\n        const VIDEO_LIST = MEDIA.filter(function(m){ return m.type === \'video\'; });\n        const MAX_DUR_SEC = VIDEO_LIST.length ? Math.max.apply(null, VIDEO_LIST.map(function(m){ return m.durationSec || 0; })) : 0;\n\n        function startOfDay(input){\n          const d = new Date(input);\n          d.setHours(0,0,0,0);\n          return d.getTime();\n        }\n\n        function endOfDay(input){\n          const d = new Date(input);\n          d.setHours(23,59,59,999);\n          return d.getTime();\n        }\n\n        function parseDateInput(v){\n          if(!v) return null;\n          const d = new Date(v + \'T00:00:00\');\n          return isNaN(d.getTime()) ? null : d.getTime();\n        }\n\n        function formatDateSlash(input){\n          const d = new Date(input);\n          const y = d.getFullYear();\n          const m = String(d.getMonth()+1).padStart(2,\'0\');\n          const day = String(d.getDate()).padStart(2,\'0\');\n          return y + \'/\' + m + \'/\' + day;\n        }\n\n        function formatDateInputValue(input){\n          const d = new Date(input);\n          const y = d.getFullYear();\n          const m = String(d.getMonth()+1).padStart(2,\'0\');\n          const day = String(d.getDate()).padStart(2,\'0\');\n          return y + \'-\' + m + \'-\' + day;\n        }\n\n        function formatDuration(sec){\n          sec = Math.max(0, Math.round(sec || 0));\n          const h = Math.floor(sec / 3600);\n          const m = Math.floor((sec % 3600) / 60);\n          const s = sec % 60;\n          if(h > 0) return h + \':\' + String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\');\n          return m + \':\' + String(s).padStart(2,\'0\');\n        }\n\n        function sizeKBLabel(kb){\n          if(kb <= 0) return \'0 KB\';\n          if(kb >= 1024 * 1024) return (kb / (1024 * 1024)).toFixed(1) + \' GB\';\n          if(kb >= 1024) return Math.round(kb / 1024) + \' MB\';\n          return Math.round(kb) + \' KB\';\n        }\n\n        function pctToSizeKB(pct){ return Math.round((pct / 100) * MAX_SIZE_KB); }\n        function pctToDurSec(pct){ return Math.round((pct / 100) * MAX_DUR_SEC); }\n\n        const F = {\n          mediaType: \'all\',\n          sortTime: \'oldest\',\n          sortSize: \'none\',\n          sortName: \'none\',\n          timeMode: \'Range\',\n          dateStart: startOfDay(MIN_TIME),\n          dateEnd: endOfDay(MAX_TIME),\n          dateBefore: endOfDay(MAX_TIME),\n          dateAfter: startOfDay(MIN_TIME),\n          sizeMinPct: 0,\n          sizeMaxPct: 100,\n          durMinPct: 0,\n          durMaxPct: 100\n        };\n\n        let calBaseMonth = new Date(F.dateStart);\n        calBaseMonth = new Date(calBaseMonth.getFullYear(), calBaseMonth.getMonth(), 1);\n        let calTempStart = F.dateStart;\n        let calTempEnd = F.dateEnd;\n\n        function iconFolder(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M1 3.5a1 1 0 011-1h2.5L5.5 4H10a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1v-5z\"/></svg>\';}\n        function iconSize(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"1.5\"/><path d=\"M4 6h4M6 4v4\"/></svg>\';}\n        function iconDate(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"1\" y=\"2\" width=\"10\" height=\"9\" rx=\"1.5\"/><path d=\"M1 5h10M4 1v2M8 1v2\"/></svg>\';}\n        function iconFile(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M2 1.5A.5.5 0 012.5 1h5L10 4.5V10.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-9z\"/><path d=\"M7.5 1v3.5H10\"/></svg>\';}\n\n        function renderGrid(list){\n          const g = document.getElementById(\'msrGrid\');\n          if(!g) return;\n\n          if(!list || list.length === 0){\n            g.innerHTML = \'<div class=\"msr-no-results\">沒有符合條件的結果</div>\';\n            return;\n          }\n\n          g.innerHTML = list.map(function(m){\n            const isVid = m.type === \'video\';\n            const thumb = isVid\n              ? \'<video src=\"\'+m.url+\'#t=0\" muted preload=\"metadata\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video>\'\n              : \'<img src=\"\'+m.url+\'\" alt=\"\'+m.title+\'\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n            const badge = isVid ? \'<span class=\"msr-vid-badge\">\'+m.duration+\'</span>\' : \'\';\n            const playOverlay = isVid ? \'<div class=\"msr-play-overlay\"><div class=\"msr-play-icon\">&#9654;</div></div>\' : \'\';\n\n            return \'<div class=\"msr-card\'+(isVid?\' is-video\':\'\')+\'\" data-id=\"\'+m.id+\'\">\'\n              + \'<div class=\"msr-thumb\">\'+thumb\n              + \'<span class=\"msr-type-badge\">\'+(isVid?\'VIDEO\':\'PHOTO\')+\'</span>\'\n              + playOverlay + badge + \'</div>\'\n              + \'<div class=\"msr-card-meta\">\'\n              + \'<div class=\"msr-card-title\">\'+m.title+\'</div>\'\n              + \'<div class=\"msr-card-info\">\'\n              + \'<div class=\"msr-info-row\">\'+iconFile()+\'<span class=\"msr-info-val\">\'+m.file+\'</span></div>\'\n              + \'<div class=\"msr-info-row\">\'+iconFolder()+\'<span class=\"msr-info-val\">\'+m.folder+\'</span></div>\'\n              + \'<div class=\"msr-info-row\">\'+iconSize()+\'<span class=\"msr-info-val\">\'+sizeKBLabel(m.sizeKB)+\'</span></div>\'\n              + \'<div class=\"msr-info-row\">\'+iconDate()+\'<span class=\"msr-info-val\">\'+m.time+\'</span></div>\'\n              + \'</div></div></div>\';\n          }).join(\'\');\n\n          g.querySelectorAll(\'.msr-card\').forEach(function(card){\n            card.addEventListener(\'click\', function(){\n              const id = parseInt(card.getAttribute(\'data-id\'), 10);\n              msrOpenPlayer(id);\n            });\n          });\n        }\n\n        function renderRecently(){\n          const box = document.getElementById(\'msrRecentList\');\n          if(!box) return;\n\n          box.innerHTML = RECENTLY.map(function(r){\n            const thumb = r.type === \'video\'\n              ? \'<video src=\"\'+r.url+\'#t=0\" muted preload=\"metadata\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video><div class=\"msr-rv-overlay\"><div class=\"msr-rv-play\"></div></div><span class=\"msr-rv-dur\">\'+r.duration+\'</span>\'\n              : \'<img src=\"\'+r.url+\'\" alt=\"\'+r.name+\'\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n\n            return \'<div class=\"msr-rv-item\" data-id=\"\'+r.id+\'\">\'\n              + \'<div class=\"msr-rv-thumb\">\'+thumb+\'</div>\'\n              + \'<div class=\"msr-rv-info\"><div class=\"msr-rv-name\">\'+r.name+\'</div>\'\n              + \'<div class=\"msr-rv-date\">2026/01/04</div>\'\n              + \'<div class=\"msr-rv-path\">路徑/資料夾/photo</div>\'\n              + \'<div class=\"msr-rv-desc\">文字描述之類</div></div></div>\';\n          }).join(\'\');\n\n          box.querySelectorAll(\'.msr-rv-item\').forEach(function(item){\n            item.addEventListener(\'click\', function(){\n              const id = parseInt(item.getAttribute(\'data-id\'), 10);\n              msrOpenPlayer(id);\n            });\n          });\n        }\n\n        function updateDateLabel(){\n          const label = document.getElementById(\'msrDateLabel\');\n          if(label) label.textContent = formatDateSlash(F.dateStart) + \' ～ \' + formatDateSlash(F.dateEnd);\n\n          const before = document.getElementById(\'msrDateBefore\');\n          if(before) before.value = formatDateInputValue(F.dateBefore);\n\n          const after = document.getElementById(\'msrDateAfter\');\n          if(after) after.value = formatDateInputValue(F.dateAfter);\n        }\n\n        function updateRangeFill(minEl, maxEl, fillEl){\n          if(!minEl || !maxEl || !fillEl) return;\n          const min = parseFloat(minEl.value);\n          const max = parseFloat(maxEl.value);\n          fillEl.style.left = min + \'%\';\n          fillEl.style.width = (max - min) + \'%\';\n        }\n\n        function updateSizeUI(){\n          const minEl = document.getElementById(\'msrSizeMin\');\n          const maxEl = document.getElementById(\'msrSizeMax\');\n          const fill = document.getElementById(\'msrSizeFill\');\n          const minLbl = document.getElementById(\'msrSizeMinLbl\');\n          const maxLbl = document.getElementById(\'msrSizeMaxLbl\');\n          if(!minEl || !maxEl) return;\n\n          let min = parseInt(minEl.value, 10);\n          let max = parseInt(maxEl.value, 10);\n          if(min > max){\n            const temp = min; min = max; max = temp;\n            minEl.value = min; maxEl.value = max;\n          }\n\n          F.sizeMinPct = min;\n          F.sizeMaxPct = max;\n\n          if(minLbl) minLbl.textContent = sizeKBLabel(pctToSizeKB(min));\n          if(maxLbl) maxLbl.textContent = max >= 100 ? \'不限\' : sizeKBLabel(pctToSizeKB(max));\n          updateRangeFill(minEl, maxEl, fill);\n        }\n\n        function updateDurUI(){\n          const minEl = document.getElementById(\'msrDurMin\');\n          const maxEl = document.getElementById(\'msrDurMax\');\n          const fill = document.getElementById(\'msrDurFill\');\n          const minLbl = document.getElementById(\'msrDurMinLbl\');\n          const maxLbl = document.getElementById(\'msrDurMaxLbl\');\n          if(!minEl || !maxEl) return;\n\n          let min = parseInt(minEl.value, 10);\n          let max = parseInt(maxEl.value, 10);\n          if(min > max){\n            const temp = min; min = max; max = temp;\n            minEl.value = min; maxEl.value = max;\n          }\n\n          F.durMinPct = min;\n          F.durMaxPct = max;\n\n          if(minLbl) minLbl.textContent = formatDuration(pctToDurSec(min));\n          if(maxLbl) maxLbl.textContent = max >= 100 ? \'不限\' : formatDuration(pctToDurSec(max));\n          updateRangeFill(minEl, maxEl, fill);\n        }\n\n        function getTimeFilterState(){\n          if(F.timeMode === \'Before\') return { min: MIN_TIME, max: endOfDay(F.dateBefore) };\n          if(F.timeMode === \'After\') return { min: startOfDay(F.dateAfter), max: MAX_TIME };\n          return { min: startOfDay(F.dateStart), max: endOfDay(F.dateEnd) };\n        }\n\n        function applyFilter(){\n          let result = MEDIA.slice();\n\n          if(F.mediaType === \'image\'){\n            result = result.filter(function(m){ return m.type === \'image\'; });\n          } else if(F.mediaType === \'video\'){\n            result = result.filter(function(m){ return m.type === \'video\'; });\n          }\n\n          const timeState = getTimeFilterState();\n          result = result.filter(function(m){\n            return m.timeMs >= timeState.min && m.timeMs <= timeState.max;\n          });\n\n          const sizeMinKB = pctToSizeKB(F.sizeMinPct);\n          const sizeMaxKB = F.sizeMaxPct >= 100 ? Infinity : pctToSizeKB(F.sizeMaxPct);\n          result = result.filter(function(m){\n            return m.sizeKB >= sizeMinKB && m.sizeKB <= sizeMaxKB;\n          });\n\n          const durChanged = !(F.durMinPct === 0 && F.durMaxPct === 100);\n          if(durChanged){\n            const durMin = pctToDurSec(F.durMinPct);\n            const durMax = F.durMaxPct >= 100 ? Infinity : pctToDurSec(F.durMaxPct);\n            result = result.filter(function(m){\n              if(m.type !== \'video\') return false;\n              return m.durationSec >= durMin && m.durationSec <= durMax;\n            });\n          }\n\n          if(F.sortTime !== \'none\'){\n            result.sort(function(a,b){\n              return F.sortTime === \'newest\' ? b.timeMs - a.timeMs : a.timeMs - b.timeMs;\n            });\n          } else if(F.sortSize !== \'none\'){\n            result.sort(function(a,b){\n              return F.sortSize === \'largest\' ? b.sizeKB - a.sizeKB : a.sizeKB - b.sizeKB;\n            });\n          } else if(F.sortName !== \'none\'){\n            result.sort(function(a,b){\n              return F.sortName === \'az\'\n                ? a.title.localeCompare(b.title, \'zh-Hant\')\n                : b.title.localeCompare(a.title, \'zh-Hant\');\n            });\n          }\n\n          renderGrid(result);\n        }\n\n        function sameDay(a, b){\n          const da = new Date(a), db = new Date(b);\n          return da.getFullYear() === db.getFullYear() && da.getMonth() === db.getMonth() && da.getDate() === db.getDate();\n        }\n\n        function renderMonth(targetDate, mountEl, isLeft){\n          if(!mountEl) return;\n\n          const y = targetDate.getFullYear();\n          const m = targetDate.getMonth();\n          const first = new Date(y, m, 1);\n          const lastDate = new Date(y, m + 1, 0).getDate();\n          const startWeek = first.getDay();\n          const monthTitle = y + \'/\' + String(m + 1).padStart(2, \'0\');\n\n          let html = \'\';\n          html += \'<div class=\"msr-cal-hd\">\';\n          html += isLeft ? \'<button type=\"button\" class=\"msr-cal-nav\" data-nav=\"-1\">‹</button>\' : \'<div style=\"width:32px\"></div>\';\n          html += \'<span>\' + monthTitle + \'</span>\';\n          html += !isLeft ? \'<button type=\"button\" class=\"msr-cal-nav\" data-nav=\"1\">›</button>\' : \'<div style=\"width:32px\"></div>\';\n          html += \'</div><div class=\"msr-cal-grid\">\';\n\n          [\'日\',\'一\',\'二\',\'三\',\'四\',\'五\',\'六\'].forEach(function(dn){ html += \'<div class=\"msr-cal-dn\">\' + dn + \'</div>\'; });\n          for(let i = 0; i < startWeek; i++) html += \'<div class=\"msr-cal-d msr-empty\"></div>\';\n\n          for(let day = 1; day <= lastDate; day++){\n            const current = new Date(y, m, day).getTime();\n            let cls = \'msr-cal-d\';\n            if(sameDay(current, Date.now())) cls += \' msr-today\';\n            if(calTempStart && calTempEnd && current >= startOfDay(calTempStart) && current <= startOfDay(calTempEnd)) cls += \' msr-in-range\';\n            if(calTempStart && sameDay(current, calTempStart)) cls += \' msr-rs\';\n            if(calTempEnd && sameDay(current, calTempEnd)) cls += \' msr-re\';\n            html += \'<div class=\"\' + cls + \'\" data-date=\"\' + current + \'\">\' + day + \'</div>\';\n          }\n\n          html += \'</div>\';\n          mountEl.innerHTML = html;\n        }\n\n        function renderCalendar(){\n          const left = document.getElementById(\'msrCalL\');\n          const right = document.getElementById(\'msrCalR\');\n          const lbl = document.getElementById(\'msrCalLbl\');\n\n          renderMonth(calBaseMonth, left, true);\n          renderMonth(new Date(calBaseMonth.getFullYear(), calBaseMonth.getMonth() + 1, 1), right, false);\n\n          if(lbl){\n            if(!calTempStart){\n              lbl.innerHTML = \'請選擇<strong>開始</strong>日期\';\n            } else if(calTempStart && !calTempEnd){\n              lbl.innerHTML = \'請選擇<strong>結束</strong>日期\';\n            } else {\n              lbl.innerHTML = \'<strong>\' + formatDateSlash(calTempStart) + \'</strong> ～ <strong>\' + formatDateSlash(calTempEnd) + \'</strong>\';\n            }\n          }\n\n          document.querySelectorAll(\'.msr-cal-nav\').forEach(function(btn){\n            btn.addEventListener(\'click\', function(e){\n              e.stopPropagation();\n              const step = parseInt(btn.getAttribute(\'data-nav\'), 10) || 0;\n              calBaseMonth = new Date(calBaseMonth.getFullYear(), calBaseMonth.getMonth() + step, 1);\n              renderCalendar();\n            });\n          });\n\n          document.querySelectorAll(\'.msr-cal-d[data-date]\').forEach(function(dayEl){\n            dayEl.addEventListener(\'click\', function(e){\n              e.stopPropagation();\n              const picked = parseInt(dayEl.getAttribute(\'data-date\'), 10);\n              if(!calTempStart || (calTempStart && calTempEnd)){\n                calTempStart = picked;\n                calTempEnd = null;\n              } else if(picked < calTempStart){\n                calTempEnd = calTempStart;\n                calTempStart = picked;\n              } else {\n                calTempEnd = picked;\n              }\n              renderCalendar();\n            });\n          });\n        }\n\n        function openCalPopup(){\n          const popup = document.getElementById(\'msrCalPopup\');\n          if(!popup) return;\n          calTempStart = F.dateStart;\n          calTempEnd = F.dateEnd;\n          calBaseMonth = new Date(new Date(F.dateStart).getFullYear(), new Date(F.dateStart).getMonth(), 1);\n          renderCalendar();\n          popup.classList.add(\'msr-open\');\n        }\n\n        function closeCalPopup(){\n          const popup = document.getElementById(\'msrCalPopup\');\n          if(popup) popup.classList.remove(\'msr-open\');\n        }\n\n        window.msrOpenPlayer = function(id){\n          const m = MEDIA.find(function(x){ return x.id === id; });\n          if(!m) return;\n\n          const media = document.getElementById(\'msrPlayerMedia\');\n          const modal = document.getElementById(\'msPlayerModal\');\n          const title = document.getElementById(\'msrPlayerTitle\');\n          const path = document.getElementById(\'msrPlayerPath\');\n          const snip = document.getElementById(\'msrPlayerSnip\');\n          const meta = document.getElementById(\'msrPlayerMeta\');\n\n          if(!media || !modal) return;\n\n          media.innerHTML = m.type === \'video\'\n            ? \'<video src=\"\'+m.url+\'\" controls autoplay style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#000;\"></video>\'\n            : \'<img src=\"\'+m.url+\'\" alt=\"\'+m.title+\'\" style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#111;\">\';\n\n          if(title) title.textContent = m.title;\n          if(path) path.textContent = m.folder + \' / \' + m.file;\n          if(snip) snip.textContent = \'「\' + m.snippet + \'」\';\n          if(meta) meta.innerHTML = \'<span>📅 \' + m.time + \'</span><span>💾 \' + sizeKBLabel(m.sizeKB) + \'</span><span>🗂 \' + m.source + \'</span>\' + (m.type === \'video\' ? \'<span>⏱ \' + m.duration + \'</span>\' : \'\');\n\n          modal.classList.add(\'msr-open\');\n        };\n\n        function closePlayer(){\n          const modal = document.getElementById(\'msPlayerModal\');\n          const media = document.getElementById(\'msrPlayerMedia\');\n          if(modal) modal.classList.remove(\'msr-open\');\n          if(media) media.innerHTML = \'\';\n        }\n\n        const playerClose = document.getElementById(\'msrPlayerClose\');\n        if(playerClose) playerClose.addEventListener(\'click\', closePlayer);\n\n        const playerModal = document.getElementById(\'msPlayerModal\');\n        if(playerModal){\n          playerModal.addEventListener(\'click\', function(e){\n            if(e.target === this) closePlayer();\n          });\n        }\n\n        const filterBtn = document.getElementById(\'msrFilterBtn\');\n        const filterPanel = document.getElementById(\'msrFilterPanel\');\n        const calPopup = document.getElementById(\'msrCalPopup\');\n        const dateTrigger = document.getElementById(\'msrDateTrigger\');\n\n        if(filterBtn && filterPanel){\n          filterBtn.addEventListener(\'click\', function(e){\n            e.stopPropagation();\n            filterPanel.classList.toggle(\'msr-open\');\n            if(calPopup) calPopup.classList.remove(\'msr-open\');\n          });\n        }\n\n        if(filterPanel){\n          filterPanel.addEventListener(\'click\', function(e){ e.stopPropagation(); });\n        }\n\n        if(calPopup){\n          calPopup.addEventListener(\'click\', function(e){ e.stopPropagation(); });\n        }\n\n        document.querySelectorAll(\'.msr-type-pill\').forEach(function(btn){\n          btn.addEventListener(\'click\', function(){\n            document.querySelectorAll(\'.msr-type-pill\').forEach(function(b){ b.classList.remove(\'active\'); });\n            btn.classList.add(\'active\');\n            F.mediaType = btn.getAttribute(\'data-type\') || \'all\';\n          });\n        });\n\n        document.querySelectorAll(\'input[name=\"sortTime\"]\').forEach(function(radio){\n          radio.addEventListener(\'change\', function(){ F.sortTime = this.value; });\n        });\n\n        document.querySelectorAll(\'input[name=\"sortSize\"]\').forEach(function(radio){\n          radio.addEventListener(\'change\', function(){ F.sortSize = this.value; });\n        });\n\n        document.querySelectorAll(\'input[name=\"sortName\"]\').forEach(function(radio){\n          radio.addEventListener(\'change\', function(){ F.sortName = this.value; });\n        });\n\n        document.querySelectorAll(\'.msr-time-tab\').forEach(function(tab){\n          tab.addEventListener(\'click\', function(){\n            document.querySelectorAll(\'.msr-time-tab\').forEach(function(t){ t.classList.remove(\'active\'); });\n            document.querySelectorAll(\'.msr-time-pane\').forEach(function(p){ p.classList.remove(\'active\'); });\n            tab.classList.add(\'active\');\n            const pane = tab.getAttribute(\'data-pane\');\n            F.timeMode = pane;\n            const paneEl = document.getElementById(\'msrPane\' + pane);\n            if(paneEl) paneEl.classList.add(\'active\');\n          });\n        });\n\n        if(dateTrigger){\n          dateTrigger.addEventListener(\'click\', function(e){\n            e.stopPropagation();\n            openCalPopup();\n          });\n        }\n\n        const calClear = document.getElementById(\'msrCalClear\');\n        if(calClear){\n          calClear.addEventListener(\'click\', function(e){\n            e.stopPropagation();\n            calTempStart = startOfDay(MIN_TIME);\n            calTempEnd = endOfDay(MAX_TIME);\n            F.dateStart = startOfDay(MIN_TIME);\n            F.dateEnd = endOfDay(MAX_TIME);\n            updateDateLabel();\n            renderCalendar();\n          });\n        }\n\n        const calOk = document.getElementById(\'msrCalOk\');\n        if(calOk){\n          calOk.addEventListener(\'click\', function(e){\n            e.stopPropagation();\n            if(calTempStart && !calTempEnd) calTempEnd = calTempStart;\n            if(calTempStart && calTempEnd){\n              F.dateStart = startOfDay(Math.min(calTempStart, calTempEnd));\n              F.dateEnd = endOfDay(Math.max(calTempStart, calTempEnd));\n              updateDateLabel();\n            }\n            closeCalPopup();\n          });\n        }\n\n        const beforeInput = document.getElementById(\'msrDateBefore\');\n        if(beforeInput){\n          beforeInput.addEventListener(\'change\', function(){\n            const t = parseDateInput(this.value);\n            if(t !== null) F.dateBefore = endOfDay(t);\n          });\n        }\n\n        const afterInput = document.getElementById(\'msrDateAfter\');\n        if(afterInput){\n          afterInput.addEventListener(\'change\', function(){\n            const t = parseDateInput(this.value);\n            if(t !== null) F.dateAfter = startOfDay(t);\n          });\n        }\n\n        const sizeMin = document.getElementById(\'msrSizeMin\');\n        const sizeMax = document.getElementById(\'msrSizeMax\');\n        if(sizeMin) sizeMin.addEventListener(\'input\', updateSizeUI);\n        if(sizeMax) sizeMax.addEventListener(\'input\', updateSizeUI);\n\n        const durMin = document.getElementById(\'msrDurMin\');\n        const durMax = document.getElementById(\'msrDurMax\');\n        if(durMin) durMin.addEventListener(\'input\', updateDurUI);\n        if(durMax) durMax.addEventListener(\'input\', updateDurUI);\n\n        const applyBtn = document.getElementById(\'msrApplyFilter\');\n        if(applyBtn){\n          applyBtn.addEventListener(\'click\', function(e){\n            e.stopPropagation();\n            applyFilter();\n            if(filterPanel) filterPanel.classList.remove(\'msr-open\');\n            if(calPopup) calPopup.classList.remove(\'msr-open\');\n          });\n        }\n\n        document.addEventListener(\'click\', function(e){\n          if(!e.target.closest(\'.msr-filter-anchor\')){\n            if(filterPanel) filterPanel.classList.remove(\'msr-open\');\n            if(calPopup) calPopup.classList.remove(\'msr-open\');\n          }\n        });\n\n        updateDateLabel();\n        updateSizeUI();\n        updateDurUI();\n        applyFilter();\n        renderRecently();\n\n      } catch (err) {\n        console.error(\'MS FRONT SCRIPT ERROR:\', err);\n      }\n    }\n\n    if (document.readyState === \'loading\') {\n      document.addEventListener(\'DOMContentLoaded\', init);\n    } else {\n      init();\n    }\n  })();\n  </script>\n  <?php\n}, 999);','','global',0,10,-1,'2026-03-11 08:05:22',1,NULL),
(35,'LT-8、9','','add_action(\'wp_footer\', function () {\n\nif (!is_page(\'lt-8%e3%80%819\')) return;\n\n?>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  let tries = 0;\n\n  function boot() {\n    const root = document.getElementById(\"msResultsRoot\");\n    const grid = document.getElementById(\"msrGrid\");\n    const filterBtn = document.getElementById(\"msrFilterBtn\");\n    const filterPanel = document.getElementById(\"msrFilterPanel\");\n\n    if (!root || !grid || !filterBtn || !filterPanel) {\n      tries++;\n      if (tries < 40) setTimeout(boot, 200);\n      return;\n    }\n\n    const MEDIA = [\n      {id:1, type:\'image\', title:\'城市街道夜景\', file:\'city_night_001.jpg\', folder:\'旅遊/城市\', snippet:\'霓虹燈映照下的繁華街道，人群熙攘，充滿都市活力\', time:\'2026/01/04\', timeMs:new Date(\'2026/01/04\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\', source:\'本地資料夾\', sizeKB:3840, durationSec:0},\n      {id:2, type:\'image\', title:\'山頂雲海日出\', file:\'mountain_sunrise.jpg\', folder:\'自然/山景\', snippet:\'清晨山頂雲海翻騰，曙光穿透雲層，壯麗景觀\', time:\'2025/11/15\', timeMs:new Date(\'2025/11/15\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/2049b122306232e42f117f7203bbb939.jpg\', source:\'本地資料夾\', sizeKB:5200, durationSec:0},\n      {id:3, type:\'image\', title:\'海岸礁石風光\', file:\'coast_rocks.jpg\', folder:\'自然/海岸\', snippet:\'海浪拍打礁石，藍天白雲映照，天然海岸美景\', time:\'2025/08/22\', timeMs:new Date(\'2025/08/22\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\', source:\'本地資料夾\', sizeKB:2100, durationSec:0},\n      {id:4, type:\'image\', title:\'古典建築倒影\', file:\'ancient_arch.jpg\', folder:\'建築/古典\', snippet:\'古建築與現代城市融合，湖面倒影清晰，對比強烈\', time:\'2025/06/10\', timeMs:new Date(\'2025/06/10\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/76f951354df79af6011bc6d8fba12d88.jpg\', source:\'本地資料夾\', sizeKB:7800, durationSec:0},\n      {id:5, type:\'image\', title:\'森林步道晨光\', file:\'forest_morning.jpg\', folder:\'自然/森林\', snippet:\'陽光穿透樹梢灑落步道，空氣清新，森林靜謐\', time:\'2025/03/05\', timeMs:new Date(\'2025/03/05\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ffe86f4d085fa13f9a70e59c24a86a4b.jpg\', source:\'本地資料夾\', sizeKB:1540, durationSec:0},\n      {id:6, type:\'image\', title:\'花田繽紛色彩\', file:\'flower_field.jpg\', folder:\'自然/花卉\', snippet:\'大片花田盛開，色彩繽紛，蝴蝶飛舞其間\', time:\'2024/09/18\', timeMs:new Date(\'2024/09/18\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/785220f09814db1a8a0d2cf5c8ae9ef9.jpg\', source:\'本地資料夾\', sizeKB:4300, durationSec:0},\n      {id:7, type:\'image\', title:\'雪山冰川全景\', file:\'glacier_panorama.jpg\', folder:\'自然/雪山\', snippet:\'白雪皚皚的山峰，冰川延伸至遠方，壯闊無垠\', time:\'2024/05/30\', timeMs:new Date(\'2024/05/30\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6b8d1023a8434e4b78ca0b2d08244a36.jpg\', source:\'本地資料夾\', sizeKB:9200, durationSec:0},\n      {id:8, type:\'image\', title:\'沙漠日落剪影\', file:\'desert_sunset.jpg\', folder:\'自然/沙漠\', snippet:\'沙丘起伏間的夕陽剪影，金紅色天空令人屏息\', time:\'2024/01/12\', timeMs:new Date(\'2024/01/12\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ddb136a8ca8460894854d4e8444d1887.jpg\', source:\'本地資料夾\', sizeKB:6600, durationSec:0},\n      {id:9, type:\'video\', title:\'Outdoor Moment 橫式\', file:\'H_moment3.mp4\', folder:\'影片/戶外\', snippet:\'橫向影片片段，戶外動態景色，AI 識別風景場景\', time:\'2026/03/01\', timeMs:new Date(\'2026/03/01\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\', duration:\'10:05\', durationSec:605, source:\'原始影音庫\', sizeKB:185000},\n      {id:10, type:\'video\', title:\'Outdoor Moment 直式\', file:\'O_moment3.mp4\', folder:\'影片/戶外\', snippet:\'直向影片片段，豐富自然元素，動感戶外記錄\', time:\'2026/03/01\', timeMs:new Date(\'2026/03/01\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\', duration:\'10:05\', durationSec:605, source:\'原始影音庫\', sizeKB:210000},\n      {id:11, type:\'image\', title:\'自然山景倒影\', file:\'fuji_reflection.jpg\', folder:\'旅遊/日本\', snippet:\'富士山湖面倒影，秋季楓葉點綴，絕美風景\', time:\'2023/10/07\', timeMs:new Date(\'2023/10/07\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6a30a40dgy1hrmpykxf3wj224r3757wi.jpg\', source:\'本地資料夾\', sizeKB:12400, durationSec:0},\n      {id:12, type:\'image\', title:\'日落黃金草原\', file:\'golden_prairie.jpg\', folder:\'自然/草原\', snippet:\'夕陽金光灑落草原，雲彩渲染天空，壯闊自然\', time:\'2023/07/19\', timeMs:new Date(\'2023/07/19\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/lA7OhpEMRug-scaled.jpg\', source:\'本地資料夾\', sizeKB:8900, durationSec:0},\n      {id:13, type:\'image\', title:\'活動紀錄截圖\', file:\'screenshot_0123.png\', folder:\'活動/紀錄\', snippet:\'室內互動場景，人物神情自然，生動精彩記錄\', time:\'2026/01/23\', timeMs:new Date(\'2026/01/23\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ScreenShot_2026-01-23_170611_665-scaled.png\', source:\'本地資料夾\', sizeKB:980, durationSec:0},\n      {id:14, type:\'image\', title:\'品牌識別標誌\', file:\'Accusys-logo_s.png\', folder:\'品牌/素材\', snippet:\'企業品牌識別，清晰專業，適合商業展示使用\', time:\'2026/02/01\', timeMs:new Date(\'2026/02/01\').getTime(), url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/02/Accusys-logo_s-1.png\', source:\'本地資料夾\', sizeKB:55, durationSec:0}\n    ];\n\n    const RECENTLY = [\n      {id:1,name:\'city_night_001.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\'},\n      {id:9,name:\'H_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\'},\n      {id:3,name:\'coast_rocks.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\'},\n      {id:10,name:\'O_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\'}\n    ];\n\n    const MIN_TIME = Math.min.apply(null, MEDIA.map(m => m.timeMs));\n    const MAX_TIME = Math.max.apply(null, MEDIA.map(m => m.timeMs));\n    const MAX_SIZE_KB = Math.max.apply(null, MEDIA.map(m => m.sizeKB || 0));\n    const VIDEO_LIST = MEDIA.filter(m => m.type === \'video\');\n    const MAX_DUR_SEC = VIDEO_LIST.length ? Math.max.apply(null, VIDEO_LIST.map(m => m.durationSec || 0)) : 0;\n\n    const F = {\n      mediaType: \'all\',\n      sortTime: \'oldest\',\n      sortSize: \'none\',\n      sortName: \'none\',\n      timeMode: \'Range\',\n      dateStart: MIN_TIME,\n      dateEnd: MAX_TIME,\n      dateBefore: MAX_TIME,\n      dateAfter: MIN_TIME,\n      sizeMinPct: 0,\n      sizeMaxPct: 100,\n      durMinPct: 0,\n      durMaxPct: 100\n    };\n\n    function startOfDay(ms){\n      const d = new Date(ms);\n      d.setHours(0,0,0,0);\n      return d.getTime();\n    }\n\n    function endOfDay(ms){\n      const d = new Date(ms);\n      d.setHours(23,59,59,999);\n      return d.getTime();\n    }\n\n    function parseDateInput(v){\n      if(!v) return null;\n      const d = new Date(v + \'T00:00:00\');\n      return isNaN(d.getTime()) ? null : d.getTime();\n    }\n\n    function formatDateSlash(ms){\n      const d = new Date(ms);\n      const y = d.getFullYear();\n      const m = String(d.getMonth()+1).padStart(2,\'0\');\n      const day = String(d.getDate()).padStart(2,\'0\');\n      return y + \'/\' + m + \'/\' + day;\n    }\n\n    function formatDateInputValue(ms){\n      const d = new Date(ms);\n      const y = d.getFullYear();\n      const m = String(d.getMonth()+1).padStart(2,\'0\');\n      const day = String(d.getDate()).padStart(2,\'0\');\n      return y + \'-\' + m + \'-\' + day;\n    }\n\n    function formatDuration(sec){\n      sec = Math.max(0, Math.round(sec || 0));\n      const h = Math.floor(sec / 3600);\n      const m = Math.floor((sec % 3600) / 60);\n      const s = sec % 60;\n      if(h > 0) return h + \':\' + String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\');\n      return m + \':\' + String(s).padStart(2,\'0\');\n    }\n\n    function sizeKBLabel(kb){\n      if(kb <= 0) return \'0 KB\';\n      if(kb >= 1024 * 1024) return (kb / (1024 * 1024)).toFixed(1) + \' GB\';\n      if(kb >= 1024) return Math.round(kb / 1024) + \' MB\';\n      return Math.round(kb) + \' KB\';\n    }\n\n    function pctToSizeKB(pct){\n      return Math.round((pct / 100) * MAX_SIZE_KB);\n    }\n\n    function pctToDurSec(pct){\n      return Math.round((pct / 100) * MAX_DUR_SEC);\n    }\n\n    function iconFolder(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M1 3.5a1 1 0 011-1h2.5L5.5 4H10a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1v-5z\"/></svg>\';}\n    function iconSize(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"1.5\"/><path d=\"M4 6h4M6 4v4\"/></svg>\';}\n    function iconDate(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"1\" y=\"2\" width=\"10\" height=\"9\" rx=\"1.5\"/><path d=\"M1 5h10M4 1v2M8 1v2\"/></svg>\';}\n    function iconFile(){return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M2 1.5A.5.5 0 012.5 1h5L10 4.5V10.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-9z\"/><path d=\"M7.5 1v3.5H10\"/></svg>\';}\n\n    function renderGrid(list){\n      if(!grid) return;\n\n      if(!list || list.length === 0){\n        grid.innerHTML = \'<div class=\"msr-no-results\">沒有符合條件的結果</div>\';\n        return;\n      }\n\n      grid.innerHTML = list.map(function(m){\n        const isVid = m.type === \'video\';\n        const thumb = isVid\n          ? \'<video src=\"\'+m.url+\'#t=0\" muted preload=\"metadata\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video>\'\n          : \'<img src=\"\'+m.url+\'\" alt=\"\'+m.title+\'\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n        const badge = isVid ? \'<span class=\"msr-vid-badge\">\'+m.duration+\'</span>\' : \'\';\n        const playOverlay = isVid ? \'<div class=\"msr-play-overlay\"><div class=\"msr-play-icon\">&#9654;</div></div>\' : \'\';\n\n        return \'<div class=\"msr-card\'+(isVid?\' is-video\':\'\')+\'\" data-id=\"\'+m.id+\'\">\'\n          + \'<div class=\"msr-thumb\">\'+thumb\n          + \'<span class=\"msr-type-badge\">\'+(isVid?\'VIDEO\':\'PHOTO\')+\'</span>\'\n          + playOverlay + badge + \'</div>\'\n          + \'<div class=\"msr-card-meta\">\'\n          + \'<div class=\"msr-card-title\">\'+m.title+\'</div>\'\n          + \'<div class=\"msr-card-info\">\'\n          + \'<div class=\"msr-info-row\">\'+iconFile()+\'<span class=\"msr-info-val\">\'+m.file+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconFolder()+\'<span class=\"msr-info-val\">\'+m.folder+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconSize()+\'<span class=\"msr-info-val\">\'+sizeKBLabel(m.sizeKB)+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconDate()+\'<span class=\"msr-info-val\">\'+m.time+\'</span></div>\'\n          + \'</div></div></div>\';\n      }).join(\'\');\n\n      grid.querySelectorAll(\'.msr-card\').forEach(function(card){\n        card.addEventListener(\'click\', function(){\n          const id = parseInt(card.getAttribute(\'data-id\'), 10);\n          openPlayer(id);\n        });\n      });\n    }\n\n    function renderRecently(){\n      const box = document.getElementById(\'msrRecentList\');\n      if(!box) return;\n\n      box.innerHTML = RECENTLY.map(function(r){\n        const thumb = r.type === \'video\'\n          ? \'<video src=\"\'+r.url+\'#t=0\" muted preload=\"metadata\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video><div class=\"msr-rv-overlay\"><div class=\"msr-rv-play\"></div></div><span class=\"msr-rv-dur\">\'+r.duration+\'</span>\'\n          : \'<img src=\"\'+r.url+\'\" alt=\"\'+r.name+\'\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n\n        return \'<div class=\"msr-rv-item\" data-id=\"\'+r.id+\'\">\'\n          + \'<div class=\"msr-rv-thumb\">\'+thumb+\'</div>\'\n          + \'<div class=\"msr-rv-info\"><div class=\"msr-rv-name\">\'+r.name+\'</div>\'\n          + \'<div class=\"msr-rv-date\">2026/01/04</div>\'\n          + \'<div class=\"msr-rv-path\">路徑/資料夾/photo</div>\'\n          + \'<div class=\"msr-rv-desc\">文字描述之類</div></div></div>\';\n      }).join(\'\');\n\n      box.querySelectorAll(\'.msr-rv-item\').forEach(function(item){\n        item.addEventListener(\'click\', function(){\n          const id = parseInt(item.getAttribute(\'data-id\'), 10);\n          openPlayer(id);\n        });\n      });\n    }\n\n    function updateDateLabel(){\n      const label = document.getElementById(\'msrDateLabel\');\n      const before = document.getElementById(\'msrDateBefore\');\n      const after = document.getElementById(\'msrDateAfter\');\n\n      if(label) label.textContent = formatDateSlash(F.dateStart) + \' ～ \' + formatDateSlash(F.dateEnd);\n      if(before) before.value = formatDateInputValue(F.dateBefore);\n      if(after) after.value = formatDateInputValue(F.dateAfter);\n    }\n\n    function updateRangeFill(minEl, maxEl, fillEl){\n      if(!minEl || !maxEl || !fillEl) return;\n      const min = parseFloat(minEl.value);\n      const max = parseFloat(maxEl.value);\n      fillEl.style.left = min + \'%\';\n      fillEl.style.width = (max - min) + \'%\';\n    }\n\n    function updateSizeUI(){\n      const minEl = document.getElementById(\'msrSizeMin\');\n      const maxEl = document.getElementById(\'msrSizeMax\');\n      const fill = document.getElementById(\'msrSizeFill\');\n      const minLbl = document.getElementById(\'msrSizeMinLbl\');\n      const maxLbl = document.getElementById(\'msrSizeMaxLbl\');\n      if(!minEl || !maxEl) return;\n\n      let min = parseInt(minEl.value, 10);\n      let max = parseInt(maxEl.value, 10);\n      if(min > max){\n        const t = min; min = max; max = t;\n        minEl.value = min;\n        maxEl.value = max;\n      }\n\n      F.sizeMinPct = min;\n      F.sizeMaxPct = max;\n\n      if(minLbl) minLbl.textContent = sizeKBLabel(pctToSizeKB(min));\n      if(maxLbl) maxLbl.textContent = max >= 100 ? \'不限\' : sizeKBLabel(pctToSizeKB(max));\n      updateRangeFill(minEl, maxEl, fill);\n    }\n\n    function updateDurUI(){\n      const minEl = document.getElementById(\'msrDurMin\');\n      const maxEl = document.getElementById(\'msrDurMax\');\n      const fill = document.getElementById(\'msrDurFill\');\n      const minLbl = document.getElementById(\'msrDurMinLbl\');\n      const maxLbl = document.getElementById(\'msrDurMaxLbl\');\n      if(!minEl || !maxEl) return;\n\n      let min = parseInt(minEl.value, 10);\n      let max = parseInt(maxEl.value, 10);\n      if(min > max){\n        const t = min; min = max; max = t;\n        minEl.value = min;\n        maxEl.value = max;\n      }\n\n      F.durMinPct = min;\n      F.durMaxPct = max;\n\n      if(minLbl) minLbl.textContent = formatDuration(pctToDurSec(min));\n      if(maxLbl) maxLbl.textContent = max >= 100 ? \'不限\' : formatDuration(pctToDurSec(max));\n      updateRangeFill(minEl, maxEl, fill);\n    }\n\n    function getFilteredList(){\n      let result = MEDIA.slice();\n\n      if(F.mediaType === \'image\'){\n        result = result.filter(m => m.type === \'image\');\n      } else if(F.mediaType === \'video\'){\n        result = result.filter(m => m.type === \'video\');\n      }\n\n      if(F.timeMode === \'Range\'){\n        const min = startOfDay(F.dateStart);\n        const max = endOfDay(F.dateEnd);\n        result = result.filter(m => m.timeMs >= min && m.timeMs <= max);\n      } else if(F.timeMode === \'Before\'){\n        const max = endOfDay(F.dateBefore);\n        result = result.filter(m => m.timeMs <= max);\n      } else if(F.timeMode === \'After\'){\n        const min = startOfDay(F.dateAfter);\n        result = result.filter(m => m.timeMs >= min);\n      }\n\n      const sizeMinKB = pctToSizeKB(F.sizeMinPct);\n      const sizeMaxKB = F.sizeMaxPct >= 100 ? Infinity : pctToSizeKB(F.sizeMaxPct);\n      result = result.filter(m => m.sizeKB >= sizeMinKB && m.sizeKB <= sizeMaxKB);\n\n      const hasDurFilter = !(F.durMinPct === 0 && F.durMaxPct === 100);\n      if(hasDurFilter){\n        const durMin = pctToDurSec(F.durMinPct);\n        const durMax = F.durMaxPct >= 100 ? Infinity : pctToDurSec(F.durMaxPct);\n        result = result.filter(m => m.type === \'video\' && m.durationSec >= durMin && m.durationSec <= durMax);\n      }\n\n      if(F.sortTime !== \'none\'){\n        result.sort((a,b) => F.sortTime === \'newest\' ? b.timeMs - a.timeMs : a.timeMs - b.timeMs);\n      } else if(F.sortSize !== \'none\'){\n        result.sort((a,b) => F.sortSize === \'largest\' ? b.sizeKB - a.sizeKB : a.sizeKB - b.sizeKB);\n      } else if(F.sortName !== \'none\'){\n        result.sort((a,b) => F.sortName === \'az\'\n          ? a.title.localeCompare(b.title, \'zh-Hant\')\n          : b.title.localeCompare(a.title, \'zh-Hant\'));\n      }\n\n      return result;\n    }\n\n    function applyFilter(){\n      renderGrid(getFilteredList());\n    }\n\n    function openPlayer(id){\n      const m = MEDIA.find(x => x.id === id);\n      if(!m) return;\n\n      const media = document.getElementById(\'msrPlayerMedia\');\n      const modal = document.getElementById(\'msPlayerModal\');\n      const title = document.getElementById(\'msrPlayerTitle\');\n      const path = document.getElementById(\'msrPlayerPath\');\n      const snip = document.getElementById(\'msrPlayerSnip\');\n      const meta = document.getElementById(\'msrPlayerMeta\');\n\n      if(!media || !modal) return;\n\n      media.innerHTML = m.type === \'video\'\n        ? \'<video src=\"\'+m.url+\'\" controls autoplay style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#000;\"></video>\'\n        : \'<img src=\"\'+m.url+\'\" alt=\"\'+m.title+\'\" style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#111;\">\';\n\n      if(title) title.textContent = m.title;\n      if(path) path.textContent = m.folder + \' / \' + m.file;\n      if(snip) snip.textContent = \'「\' + m.snippet + \'」\';\n      if(meta) meta.innerHTML = \'<span>📅 \' + m.time + \'</span><span>💾 \' + sizeKBLabel(m.sizeKB) + \'</span><span>🗂 \' + m.source + \'</span>\' + (m.type === \'video\' ? \'<span>⏱ \' + m.duration + \'</span>\' : \'\');\n\n      modal.classList.add(\'msr-open\');\n    }\n\n    function closePlayer(){\n      const modal = document.getElementById(\'msPlayerModal\');\n      const media = document.getElementById(\'msrPlayerMedia\');\n      if(modal) modal.classList.remove(\'msr-open\');\n      if(media) media.innerHTML = \'\';\n    }\n\n    if(filterBtn && filterPanel){\n      filterBtn.addEventListener(\'click\', function(e){\n        e.stopPropagation();\n        filterPanel.classList.toggle(\'msr-open\');\n      });\n    }\n\n    filterPanel.addEventListener(\'click\', function(e){\n      e.stopPropagation();\n    });\n\n    document.addEventListener(\'click\', function(e){\n      if(!e.target.closest(\'.msr-filter-anchor\')){\n        filterPanel.classList.remove(\'msr-open\');\n      }\n    });\n\n    document.querySelectorAll(\'.msr-type-pill\').forEach(function(btn){\n      btn.addEventListener(\'click\', function(){\n        document.querySelectorAll(\'.msr-type-pill\').forEach(b => b.classList.remove(\'active\'));\n        btn.classList.add(\'active\');\n        F.mediaType = btn.getAttribute(\'data-type\') || \'all\';\n      });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortTime\"]\').forEach(function(radio){\n      radio.addEventListener(\'change\', function(){\n        F.sortTime = this.value;\n      });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortSize\"]\').forEach(function(radio){\n      radio.addEventListener(\'change\', function(){\n        F.sortSize = this.value;\n      });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortName\"]\').forEach(function(radio){\n      radio.addEventListener(\'change\', function(){\n        F.sortName = this.value;\n      });\n    });\n\n    document.querySelectorAll(\'.msr-time-tab\').forEach(function(tab){\n      tab.addEventListener(\'click\', function(){\n        document.querySelectorAll(\'.msr-time-tab\').forEach(t => t.classList.remove(\'active\'));\n        document.querySelectorAll(\'.msr-time-pane\').forEach(p => p.classList.remove(\'active\'));\n        tab.classList.add(\'active\');\n        const pane = tab.getAttribute(\'data-pane\');\n        F.timeMode = pane;\n        const paneEl = document.getElementById(\'msrPane\' + pane);\n        if(paneEl) paneEl.classList.add(\'active\');\n      });\n    });\n\n    const dateTrigger = document.getElementById(\'msrDateTrigger\');\n    if(dateTrigger){\n      dateTrigger.addEventListener(\'click\', function(){\n        const startText = prompt(\'請輸入開始日期（YYYY-MM-DD）\', formatDateInputValue(F.dateStart));\n        if(!startText) return;\n        const endText = prompt(\'請輸入結束日期（YYYY-MM-DD）\', formatDateInputValue(F.dateEnd));\n        if(!endText) return;\n\n        const s = parseDateInput(startText);\n        const e = parseDateInput(endText);\n\n        if(s && e){\n          F.dateStart = Math.min(s, e);\n          F.dateEnd = Math.max(s, e);\n          updateDateLabel();\n        }\n      });\n    }\n\n    const beforeInput = document.getElementById(\'msrDateBefore\');\n    if(beforeInput){\n      beforeInput.addEventListener(\'change\', function(){\n        const t = parseDateInput(this.value);\n        if(t !== null) F.dateBefore = t;\n      });\n    }\n\n    const afterInput = document.getElementById(\'msrDateAfter\');\n    if(afterInput){\n      afterInput.addEventListener(\'change\', function(){\n        const t = parseDateInput(this.value);\n        if(t !== null) F.dateAfter = t;\n      });\n    }\n\n    const sizeMin = document.getElementById(\'msrSizeMin\');\n    const sizeMax = document.getElementById(\'msrSizeMax\');\n    if(sizeMin) sizeMin.addEventListener(\'input\', updateSizeUI);\n    if(sizeMax) sizeMax.addEventListener(\'input\', updateSizeUI);\n\n    const durMin = document.getElementById(\'msrDurMin\');\n    const durMax = document.getElementById(\'msrDurMax\');\n    if(durMin) durMin.addEventListener(\'input\', updateDurUI);\n    if(durMax) durMax.addEventListener(\'input\', updateDurUI);\n\n    const applyBtn = document.getElementById(\'msrApplyFilter\');\n    if(applyBtn){\n      applyBtn.addEventListener(\'click\', function(e){\n        e.stopPropagation();\n        applyFilter();\n        filterPanel.classList.remove(\'msr-open\');\n      });\n    }\n\n    const playerClose = document.getElementById(\'msrPlayerClose\');\n    if(playerClose) playerClose.addEventListener(\'click\', closePlayer);\n\n    const playerModal = document.getElementById(\'msPlayerModal\');\n    if(playerModal){\n      playerModal.addEventListener(\'click\', function(e){\n        if(e.target === this) closePlayer();\n      });\n    }\n\n    updateDateLabel();\n    updateSizeUI();\n    updateDurUI();\n    applyFilter();\n    renderRecently();\n  }\n\n  boot();\n});\n</script>\n<?php\n}, 999);','','global',0,10,-1,'2026-03-12 03:25:56',1,NULL),
(36,'media-detail','','\nadd_action(\'wp_footer\', function () {\n\n  if (!is_page(\'media-detail\')) return;\n\n?>\n<script>\nwindow._fp10Inited = false;\n\nwindow._fp10Init = function() {\n  if(window._fp10Inited) return;\n\n  var filterBtn   = document.getElementById(\'msrFilterBtn\');\n  var filterPanel = document.getElementById(\'msrFilterPanel\');\n\n  if(!filterBtn || !filterPanel){\n    setTimeout(window._fp10Init, 150);\n    return;\n  }\n\n  window._fp10Inited = true;\n\n  /* =========================================================\n     主題色同步\n     ========================================================= */\n  function hexToRgb(hex){\n    hex=String(hex||\'\').trim();\n    if(!hex)return null;\n    if(hex.charAt(0)===\'#\')hex=hex.slice(1);\n    if(hex.length===3)hex=hex.split(\'\').map(function(x){return x+x;}).join(\'\');\n    if(hex.length!==6)return null;\n    var num=parseInt(hex,16);\n    if(isNaN(num))return null;\n    return{r:(num>>16)&255,g:(num>>8)&255,b:num&255};\n  }\n  function rgbToString(rgb){if(!rgb)return\'\';return\'rgb(\'+rgb.r+\', \'+rgb.g+\', \'+rgb.b+\')\';}\n  function rgbaToString(rgb,alpha){if(!rgb)return\'\';return\'rgba(\'+rgb.r+\', \'+rgb.g+\', \'+rgb.b+\', \'+alpha+\')\';}\n\n  function getThemeFromStorage(){\n    var key=\'blue\';\n    try{key=localStorage.getItem(\'ms_color_scheme_v1\')||\'blue\';}catch(e){key=\'blue\';}\n    var map={\n      blue:  {accent:\'#8fbef8\',soft:\'#eaf2ff\',text:\'#1967d2\'},\n      green: {accent:\'#c9d86f\',soft:\'#f4f8df\',text:\'#6b8e23\'},\n      yellow:{accent:\'#efd66a\',soft:\'#fbf6df\',text:\'#b8860b\'},\n      orange:{accent:\'#efb07b\',soft:\'#fff0e5\',text:\'#d97706\'},\n      dark:  {accent:\'#6b7280\',soft:\'#f3f4f6\',text:\'#374151\'},\n      light: {accent:\'#d9d9d9\',soft:\'#fafafa\',text:\'#7a7a7a\'}\n    };\n    return map[key]||map.blue;\n  }\n\n  function applySyncedTheme(){\n    var root=document.getElementById(\'msPlayerRoot\');\n    if(!root)return;\n    var theme=getThemeFromStorage();\n    if(!theme)return;\n    var lightRgb=hexToRgb(theme.soft),darkRgb=hexToRgb(theme.text),accentRgb=hexToRgb(theme.accent);\n    if(!lightRgb||!darkRgb||!accentRgb)return;\n    root.style.setProperty(\'--sync-accent-light\',rgbToString(lightRgb));\n    root.style.setProperty(\'--sync-accent-dark\',rgbToString(darkRgb));\n    root.style.setProperty(\'--sync-accent\',rgbToString(accentRgb));\n    root.style.setProperty(\'--sync-accent-border\',rgbaToString(accentRgb,0.22));\n    root.style.setProperty(\'--sync-accent-shadow\',rgbaToString(accentRgb,0.16));\n  }\n\n  function watchThemeSync(){\n    applySyncedTheme();\n    window.addEventListener(\'storage\',function(e){if(e.key===\'ms_color_scheme_v1\'){setTimeout(applySyncedTheme,30);setTimeout(applySyncedTheme,120);}});\n    document.addEventListener(\'visibilitychange\',function(){if(!document.hidden)setTimeout(applySyncedTheme,30);});\n    window.addEventListener(\'focus\',function(){setTimeout(applySyncedTheme,30);});\n    document.addEventListener(\'click\',function(){setTimeout(applySyncedTheme,30);});\n  }\n  watchThemeSync();\n\n  /* =========================================================\n     篩選面板 toggle\n     ========================================================= */\n  function toggleFP(e){if(e){e.stopPropagation();e.preventDefault();}filterPanel.classList.toggle(\'msr-open\');}\n  function closeFP(){filterPanel.classList.remove(\'msr-open\');}\n\n  document.addEventListener(\'click\',function(e){\n    var target=e.target;\n    while(target&&target!==document){\n      if(target===filterBtn){toggleFP(e);return;}\n      if(target===filterPanel||filterPanel.contains(target))return;\n      target=target.parentNode;\n    }\n    closeFP();\n  },true);\n\n  window._fp10ToggleFP=toggleFP;\n  filterPanel.addEventListener(\'click\',function(e){e.stopPropagation();},false);\n\n  /* =========================================================\n     排序方式：依據 pills × 方向 pills，互斥，文字動態更新\n     ========================================================= */\n  var sortBy  = \'time\';\n  var sortDir = \'asc\';\n\n  var dirLabels = {\n    time: { asc:\'舊 → 新\', desc:\'新 → 舊\' },\n    size: { asc:\'小 → 大\', desc:\'大 → 小\' },\n    name: { asc:\'A → Z\',   desc:\'Z → A\'   }\n  };\n\n  function updateDirUI(){\n    var lbl = dirLabels[sortBy] || dirLabels.time;\n    var asc  = document.getElementById(\'fp10DirAsc\');\n    var desc = document.getElementById(\'fp10DirDesc\');\n    if(asc)  asc.textContent  = lbl.asc;\n    if(desc) desc.textContent = lbl.desc;\n  }\n\n  document.querySelectorAll(\'#msrFilterPanel .fp-sbtn[data-sort-by]\').forEach(function(btn){\n    btn.addEventListener(\'click\',function(){\n      document.querySelectorAll(\'#msrFilterPanel .fp-sbtn[data-sort-by]\').forEach(function(b){b.classList.remove(\'active\');});\n      btn.classList.add(\'active\');\n      sortBy=btn.getAttribute(\'data-sort-by\');\n      updateDirUI();\n    },false);\n  });\n\n  document.querySelectorAll(\'#msrFilterPanel .fp-sbtn[data-sort-dir]\').forEach(function(btn){\n    btn.addEventListener(\'click\',function(){\n      document.querySelectorAll(\'#msrFilterPanel .fp-sbtn[data-sort-dir]\').forEach(function(b){b.classList.remove(\'active\');});\n      btn.classList.add(\'active\');\n      sortDir=btn.getAttribute(\'data-sort-dir\');\n    },false);\n  });\n\n  updateDirUI();\n\n  /* =========================================================\n     媒體類型 pills\n     ========================================================= */\n  var tpills=document.querySelectorAll(\'#msPlayerRoot .fp-tpill\');\n  tpills.forEach(function(p){\n    p.addEventListener(\'click\',function(){\n      var was=p.classList.contains(\'active\');\n      tpills.forEach(function(x){x.classList.remove(\'active\');});\n      if(!was)p.classList.add(\'active\');\n    },false);\n  });\n\n  /* =========================================================\n     日曆狀態\n     ========================================================= */\n  var today=new Date();\n  var calYear=today.getFullYear(),calMonth=today.getMonth(),pickYear=calYear;\n  var dateMode=\'Range\',rangeStart=null,rangeEnd=null,rangePick=0,singleDate=null;\n  var ymPickOpen=false,yrPickOpen=false;\n\n  function pad(n){return String(n).padStart(2,\'0\');}\n  function fmtD(d){if(!d)return\'—\';return d.getFullYear()+\'/\'+pad(d.getMonth()+1)+\'/\'+pad(d.getDate());}\n\n  function updateDTxt(){\n    var el=document.getElementById(\'fp10DTxt\');\n    if(!el)return;\n    if(dateMode===\'Range\')       el.textContent=fmtD(rangeStart)+\' ～ \'+fmtD(rangeEnd);\n    else if(dateMode===\'Before\') el.textContent=\'在 \'+fmtD(singleDate)+\' 之前\';\n    else                         el.textContent=\'在 \'+fmtD(singleDate)+\' 之後\';\n  }\n\n  var ymPick=document.getElementById(\'fp10YMPick\');\n  var calBody=document.getElementById(\'fp10CalBody\');\n  var calMLbl=document.getElementById(\'fp10CalMLbl\');\n  var ymYrLbl=document.getElementById(\'fp10YMYrLbl\');\n  var ymGrid=document.getElementById(\'fp10YMGrid\');\n\n  function renderYrGrid(){\n    var startY=pickYear-5; ymGrid.innerHTML=\'\';\n    for(var y=startY;y<startY+12;y++){\n      (function(yr){var btn=document.createElement(\'button\');btn.className=\'fp-ym-cell\'+(yr===calYear?\' active\':\'\');btn.textContent=yr+\'年\';btn.addEventListener(\'click\',function(e){e.stopPropagation();pickYear=yr;closeYrGrid();},false);ymGrid.appendChild(btn);})(y);\n    }\n  }\n  function openYrGrid(){yrPickOpen=true;ymYrLbl.classList.add(\'yr-open\');renderYrGrid();}\n  function closeYrGrid(){yrPickOpen=false;ymYrLbl.classList.remove(\'yr-open\');renderYMPicker();}\n\n  function renderYMPicker(){\n    ymYrLbl.textContent=pickYear+\' 年\'; ymGrid.innerHTML=\'\';\n    [\'1月\',\'2月\',\'3月\',\'4月\',\'5月\',\'6月\',\'7月\',\'8月\',\'9月\',\'10月\',\'11月\',\'12月\'].forEach(function(m,i){\n      var btn=document.createElement(\'button\');btn.className=\'fp-ym-cell\'+(pickYear===calYear&&i===calMonth?\' active\':\'\');btn.textContent=m;\n      btn.addEventListener(\'click\',function(e){e.stopPropagation();calYear=pickYear;calMonth=i;closeYMPicker();renderCal();},false);ymGrid.appendChild(btn);\n    });\n  }\n\n  ymYrLbl.addEventListener(\'click\',function(e){e.stopPropagation();if(yrPickOpen)closeYrGrid();else openYrGrid();},false);\n\n  function openYMPicker(){ymPickOpen=true;pickYear=calYear;yrPickOpen=false;ymPick.classList.add(\'vis\');calBody.style.display=\'none\';calMLbl.classList.add(\'pick-open\');renderYMPicker();}\n  function closeYMPicker(){ymPickOpen=false;yrPickOpen=false;ymPick.classList.remove(\'vis\');calBody.style.display=\'\';calMLbl.classList.remove(\'pick-open\');ymYrLbl.classList.remove(\'yr-open\');}\n\n  calMLbl.addEventListener(\'click\',function(e){e.stopPropagation();if(ymPickOpen)closeYMPicker();else openYMPicker();},false);\n\n  document.getElementById(\'fp10YMYrPrev\').addEventListener(\'click\',function(e){e.stopPropagation();if(yrPickOpen){pickYear-=12;renderYrGrid();}else{pickYear--;renderYMPicker();}},false);\n  document.getElementById(\'fp10YMYrNext\').addEventListener(\'click\',function(e){e.stopPropagation();if(yrPickOpen){pickYear+=12;renderYrGrid();}else{pickYear++;renderYMPicker();}},false);\n\n  function renderCal(){\n    var lbl=document.getElementById(\'fp10CalMLblTxt\');\n    if(lbl)lbl.textContent=calYear+\' 年 \'+(calMonth+1)+\' 月\';\n    var grid=document.getElementById(\'fp10CalGrid\');\n    if(!grid)return;\n    grid.innerHTML=\'\';\n    [\'日\',\'一\',\'二\',\'三\',\'四\',\'五\',\'六\'].forEach(function(d){var el=document.createElement(\'div\');el.className=\'fp-cal-dow\';el.textContent=d;grid.appendChild(el);});\n    var firstDow=new Date(calYear,calMonth,1).getDay();\n    var daysInMonth=new Date(calYear,calMonth+1,0).getDate();\n    var prevDays=new Date(calYear,calMonth,0).getDate();\n    for(var i=firstDow-1;i>=0;i--){var el=document.createElement(\'button\');el.className=\'fp-cal-day oth emp\';el.textContent=prevDays-i;grid.appendChild(el);}\n    for(var d=1;d<=daysInMonth;d++){\n      (function(day){\n        var btn=document.createElement(\'button\');\n        var thisDate=new Date(calYear,calMonth,day);\n        var cls=\'fp-cal-day\';\n        if(today.toDateString()===thisDate.toDateString())cls+=\' tdy\';\n        if(dateMode===\'Range\'){\n          var isS=rangeStart&&thisDate.toDateString()===rangeStart.toDateString();\n          var isE=rangeEnd&&thisDate.toDateString()===rangeEnd.toDateString();\n          var inR=rangeStart&&rangeEnd&&thisDate>rangeStart&&thisDate<rangeEnd;\n          if(isS&&rangeEnd)cls+=\' rs\';else if(isE&&rangeStart)cls+=\' re\';else if(isS||isE)cls+=\' sel\';else if(inR)cls+=\' rng\';\n        }else{if(singleDate&&thisDate.toDateString()===singleDate.toDateString())cls+=\' sel\';}\n        btn.className=cls;btn.textContent=day;\n        btn.addEventListener(\'click\',function(e){\n          e.stopPropagation();\n          var picked=new Date(calYear,calMonth,day);\n          if(dateMode===\'Range\'){if(rangePick===0||(rangeStart&&rangeEnd)){rangeStart=picked;rangeEnd=null;rangePick=1;}else{if(picked<rangeStart){rangeEnd=rangeStart;rangeStart=picked;}else{rangeEnd=picked;}rangePick=0;}}else{singleDate=picked;}\n          updateDTxt();renderCal();\n        },false);\n        grid.appendChild(btn);\n      })(d);\n    }\n    var total=firstDow+daysInMonth,rem=total%7===0?0:7-(total%7);\n    for(var d2=1;d2<=rem;d2++){var el2=document.createElement(\'button\');el2.className=\'fp-cal-day oth emp\';el2.textContent=d2;grid.appendChild(el2);}\n  }\n\n  document.getElementById(\'fp10CalPrev\').addEventListener(\'click\',function(e){e.stopPropagation();if(ymPickOpen){if(yrPickOpen){pickYear-=12;renderYrGrid();}else{pickYear--;renderYMPicker();}return;}calMonth--;if(calMonth<0){calMonth=11;calYear--;}renderCal();},false);\n  document.getElementById(\'fp10CalNext\').addEventListener(\'click\',function(e){e.stopPropagation();if(ymPickOpen){if(yrPickOpen){pickYear+=12;renderYrGrid();}else{pickYear++;renderYMPicker();}return;}calMonth++;if(calMonth>11){calMonth=0;calYear++;}renderCal();},false);\n  document.getElementById(\'fp10CalClear\').addEventListener(\'click\',function(e){e.stopPropagation();rangeStart=rangeEnd=singleDate=null;rangePick=0;updateDTxt();renderCal();},false);\n  document.getElementById(\'fp10CalToday\').addEventListener(\'click\',function(e){e.stopPropagation();calYear=today.getFullYear();calMonth=today.getMonth();if(dateMode===\'Range\'){rangeStart=new Date(today);rangeEnd=null;rangePick=1;}else{singleDate=new Date(today);}closeYMPicker();updateDTxt();renderCal();},false);\n\n  var drow=document.getElementById(\'fp10DRow\'),calWrap=document.getElementById(\'fp10CalWrap\');\n  drow.addEventListener(\'click\',function(e){e.stopPropagation();var vis=calWrap.classList.toggle(\'vis\');drow.classList.toggle(\'open\',vis);if(vis){closeYMPicker();renderCal();}},false);\n\n  document.querySelectorAll(\'#msPlayerRoot .fp-ttab\').forEach(function(tab){\n    tab.addEventListener(\'click\',function(){\n      document.querySelectorAll(\'#msPlayerRoot .fp-ttab\').forEach(function(t){t.classList.remove(\'active\');});\n      tab.classList.add(\'active\');dateMode=tab.dataset.mode;\n      rangeStart=rangeEnd=singleDate=null;rangePick=0;updateDTxt();\n      if(calWrap.classList.contains(\'vis\')){closeYMPicker();renderCal();}\n    },false);\n  });\n\n  /* =========================================================\n     雙滑桿（檔案大小和時長 API 尚未提供，視覺 disable）\n     ========================================================= */\n  function szLbl(v){if(v<=0)return\'1 MB 以下\';if(v>=100)return\'100 GB+\';var steps=[1,5,10,50,100,500,1024,5120,10240,51200,102400];var mb=steps[Math.round((v/100)*(steps.length-1))];return mb>=1024?(mb/1024).toFixed(mb>=10240?0:1)+\' GB\':mb+\' MB\';}\n  function drLbl(v){var s=Math.round(3+v/100*(10800-3));if(s<60)return s+\' 秒\';if(s<3600)return Math.round(s/60)+\' 分鐘\';return(s/3600).toFixed(1)+\' 小時\';}\n  function setupRange(aId,bId,filId,minLId,maxLId,ulId,lFn){\n    var a=document.getElementById(aId),b=document.getElementById(bId),fil=document.getElementById(filId),minL=document.getElementById(minLId),maxL=document.getElementById(maxLId),ul=document.getElementById(ulId);\n    function upd(){var lo=parseInt(a.value),hi=parseInt(b.value);if(lo>hi){a.value=hi;lo=hi;}fil.style.left=lo+\'%\';fil.style.width=(hi-lo)+\'%\';minL.textContent=lFn(lo);maxL.textContent=lFn(hi);ul.classList.toggle(\'active\',lo===0&&hi===100);}\n    a.addEventListener(\'input\',upd,false);b.addEventListener(\'input\',upd,false);\n    ul.addEventListener(\'click\',function(e){e.stopPropagation();a.value=0;b.value=100;upd();},false);\n    upd();\n  }\n  setupRange(\'fp10SzA\',\'fp10SzB\',\'fp10SzFil\',\'fp10SzMin\',\'fp10SzMax\',\'fp10SzUnlim\',szLbl);\n  setupRange(\'fp10DrA\',\'fp10DrB\',\'fp10DrFil\',\'fp10DrMin\',\'fp10DrMax\',\'fp10DrUnlim\',drLbl);\n\n  (function(){\n    var style=document.createElement(\'style\');\n    style.textContent=\'#fp10SzA,#fp10SzB,#fp10DrA,#fp10DrB{pointer-events:none!important;opacity:0.35!important;}#fp10SzFil,#fp10DrFil{opacity:0.25!important;}#fp10SzUnlim,#fp10DrUnlim{pointer-events:none!important;opacity:0.45!important;}\';\n    document.head.appendChild(style);\n    document.querySelectorAll(\'#msrFilterPanel .fp-sec\').forEach(function(sec){\n      var lbl=sec.querySelector(\'.fp-lbl\');\n      if(!lbl)return;\n      var t=lbl.textContent.trim();\n      if(t===\'檔案大小\'||t===\'影片時長\'){\n        var note=document.createElement(\'span\');\n        note.className=\'fp-pending-note\';\n        note.textContent=\'待 API 支援後啟用\';\n        sec.appendChild(note);\n      }\n    });\n  })();\n\n  /* =========================================================\n     套用篩選\n     ========================================================= */\n  document.getElementById(\'fp10Apply\').addEventListener(\'click\',function(){\n    var active=document.querySelector(\'#msPlayerRoot .fp-tpill.active\');\n    var mediaType=active?active.dataset.type:\'all\';\n    var dateFilter={mode:dateMode};\n    if(dateMode===\'Range\')  dateFilter={mode:\'Range\',start:rangeStart,end:rangeEnd};\n    if(dateMode===\'Before\') dateFilter={mode:\'Before\',date:singleDate};\n    if(dateMode===\'After\')  dateFilter={mode:\'After\',date:singleDate};\n    window._fp10Filter={mediaType:mediaType,dateFilter:dateFilter,sortBy:sortBy,sortDir:sortDir};\n    document.dispatchEvent(new CustomEvent(\'fp10ApplyFilter\'));\n    calWrap.classList.remove(\'vis\');drow.classList.remove(\'open\');closeFP();\n  },false);\n\n  updateDTxt();\n\n  /* =========================================================\n     搜尋邏輯\n     ========================================================= */\n  var tries2=0;\n  function boot(){\n    var viewer=document.getElementById(\"viewer\");\n    var mainTitle=document.getElementById(\"mainTitle\");\n    var mainMeta=document.getElementById(\"mainMeta\");\n    var strip=document.getElementById(\"strip\");\n    var recentList=document.getElementById(\"recentList\");\n    var stripKeyword=document.getElementById(\"stripKeyword\");\n\n    if(!viewer||!mainTitle||!mainMeta||!strip||!recentList||!stripKeyword){\n      if(++tries2<40)setTimeout(boot,200);\n      return;\n    }\n\n    var SEARCH_API=\"https://accusys1.app.n8n.cloud/webhook/search\";\n    var EVENT_API=\"https://accusys1.app.n8n.cloud/webhook/event\";\n    var THUMB_BASE=\"https://wp.momentry.ddns.net/\";\n\n    function buildThumbUrl(videoId,tStart){if(!videoId)return\'\';return THUMB_BASE+\'?momentry_thumb=1&uuid=\'+encodeURIComponent(videoId)+\'&t=\'+encodeURIComponent(Number(tStart||0));}\n    function getQueryFromUrl(){try{var p=new URLSearchParams(window.location.search);return(p.get(\'q\')||p.get(\'query\')||\'\').trim();}catch(e){return\'\';}}\n\n    var URL_QUERY=getQueryFromUrl();\n    var FROM_PREVIOUS_PAGE=!!URL_QUERY;\n    var currentQuery=URL_QUERY||(function(){try{return sessionStorage.getItem(\'ms_last_query\')||\'春天\';}catch(e){return\'春天\';}})();\n    var RAW_RESULTS=[],currentId=null,hasSentPlayForCurrent=false;\n\n    function getF(){\n      var f=window._fp10Filter||{};\n      return{\n        mediaType:f.mediaType||\'all\',\n        sortBy:f.sortBy||\'time\',\n        sortDir:f.sortDir||\'asc\',\n        dateFilter:f.dateFilter||{mode:\'Range\',start:null,end:null}\n      };\n    }\n\n    function esc(s){return String(s==null?\'\':s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\').replace(/\"/g,\'&quot;\').replace(/\'/g,\'&#39;\');}\n    function pad2(n){return n<10?\'0\'+n:\'\'+n;}\n    function formatDateFromMs(ms){if(!ms||isNaN(ms))return\'—\';var d=new Date(ms);return d.getFullYear()+\'/\'+pad2(d.getMonth()+1)+\'/\'+pad2(d.getDate());}\n    function parseISOToMs(v){if(!v)return null;var t=new Date(v).getTime();return isNaN(t)?null:t;}\n    function startOfDay(ms){var d=new Date(ms);d.setHours(0,0,0,0);return d.getTime();}\n    function endOfDay(ms){var d=new Date(ms);d.setHours(23,59,59,999);return d.getTime();}\n    function secToClock(sec){sec=Math.max(0,Math.floor(Number(sec)||0));var h=Math.floor(sec/3600),m=Math.floor((sec%3600)/60),s=sec%60;if(h>0)return h+\':\'+pad2(m)+\':\'+pad2(s);return m+\':\'+pad2(s);}\n    function inferMediaType(url,fallback){if(fallback===\'image\'||fallback===\'video\')return fallback;var u=String(url||\'\').toLowerCase();if(u.match(/\\.(jpg|jpeg|png|gif|webp)(\\?|#|$)/))return\'image\';return\'video\';}\n    function scoreLabel(score){if(score==null||score===\'\')return\'\';var n=Number(score);if(isNaN(n))return\'\';return\'Score \'+n.toFixed(2);}\n    function saveCurrentQuery(q){try{sessionStorage.setItem(\'ms_last_query\',q||\'\');}catch(e){}}\n    function getRecentStorage(){try{return JSON.parse(localStorage.getItem(\'ms_recent_viewed_v1\')||\'[]\');}catch(e){return[];}}\n    function saveRecentStorage(list){try{localStorage.setItem(\'ms_recent_viewed_v1\',JSON.stringify(list||[]));}catch(e){}}\n\n    function pushRecent(item){\n      if(!item)return;\n      var list=getRecentStorage().filter(function(x){return x.moment_id!==item.moment_id;});\n      list.unshift({moment_id:item.moment_id,video_id:item.video_id,title:item.title,snippet:item.snippet,video_url:item.video_url,media_type:item.type,t_start:item.t_start,t_end:item.t_end,timeMs:item.timeMs,time:item.time,folder:item.folder,durationSec:item.durationSec,duration:item.duration,thumbnailUrl:item.thumbnailUrl});\n      saveRecentStorage(list.slice(0,8));\n    }\n\n    function sendEventPayload(payload){try{fetch(EVENT_API,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload),keepalive:true}).catch(function(){});}catch(e){}}\n    function fireSearchEvent(q){sendEventPayload({event_type:\'search\',query:q||\'\',timestamp:new Date().toISOString()});}\n    function fireClickEvent(item){if(!item)return;sendEventPayload({event_type:\'click\',query:currentQuery||\'\',moment_id:item.moment_id||\'\',video_id:item.video_id||\'\',t_start:Number(item.t_start||0),timestamp:new Date().toISOString()});}\n    function firePlayEvent(item){if(!item)return;sendEventPayload({event_type:\'play\',query:currentQuery||\'\',moment_id:item.moment_id||\'\',video_id:item.video_id||\'\',t_start:Number(item.t_start||0),timestamp:new Date().toISOString()});}\n\n    function normalizeApiResponse(json){\n      var results=[];\n      if(Array.isArray(json))results=json;\n      else if(json&&Array.isArray(json.results))results=json.results;\n      else if(json&&json.data&&Array.isArray(json.data.results))results=json.data.results;\n      return results.map(function(item,idx){\n        var type=inferMediaType(item.video_url,item.media_type);\n        var timeMs=parseISOToMs(item.created_at)||0;\n        var durationSec=Number(item.durationSec||item.duration||Math.max(0,Number(item.t_end||0)-Number(item.t_start||0))||0);\n        var videoId=item.video_id||(\'video_\'+(idx+1));\n        var tStart=Number(item.t_start||0);\n        return{id:idx+1,moment_id:item.moment_id||(\'moment_\'+(idx+1)),video_id:videoId,video_url:item.video_url||\'\',thumbnailUrl:type===\'video\'?buildThumbUrl(videoId,tStart):(item.video_url||\'\'),title:item.title||(\'Result \'+(idx+1)),snippet:item.snippet||\'\',score:item.score,type:type,t_start:tStart,t_end:Number(item.t_end||0),durationSec:durationSec,duration:durationSec?secToClock(durationSec):\'\',timeMs:timeMs,time:timeMs?formatDateFromMs(timeMs):\'—\',folder:item.source_path||item.source_type||\'搜尋結果\',source:item.source_type||\'Search API\',sizeKB:Number(item.sizeKB||0),raw:item};\n      });\n    }\n\n    function setViewerPlaceholder(title,descHtml){viewer.innerHTML=\'<div style=\"width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fafafa;color:#666;padding:24px;text-align:center;line-height:1.8;position:absolute;top:0;left:0;\"><div>\'+descHtml+\'</div></div>\';mainTitle.textContent=title||\'搜尋結果\';mainMeta.innerHTML=descHtml||\'\';}\n    function renderLoadingState(query){stripKeyword.textContent=query||\'搜尋\';setViewerPlaceholder(\'搜尋進行中\',\'正在搜尋 <strong>\'+esc(query||\'\')+\'</strong>，請稍候…\');strip.innerHTML=\'<div style=\"width:100%;padding:28px 18px;border:1px dashed #ddd;border-radius:12px;background:#fff;color:#666;\"><div style=\"font-size:14px;font-weight:600;color:#333;margin-bottom:6px;\">Searching...</div></div>\';}\n    function renderEmptyState(query){stripKeyword.textContent=query||\'搜尋\';setViewerPlaceholder(\'沒有找到結果\',\'找不到符合 <strong>\'+esc(query||\'\')+\'</strong> 的內容。\');strip.innerHTML=\'<div style=\"width:100%;padding:28px 18px;border:1px dashed #ddd;border-radius:12px;background:#fff;color:#666;\"><div style=\"font-size:14px;font-weight:600;color:#333;margin-bottom:6px;\">No results</div></div>\';}\n    function renderErrorState(query,message){stripKeyword.textContent=query||\'搜尋\';setViewerPlaceholder(\'搜尋發生錯誤\',\'目前無法取得搜尋結果。\');strip.innerHTML=\'<div style=\"width:100%;padding:28px 18px;border:1px solid #f1d2c7;border-radius:12px;background:#fff8f6;color:#8a4b35;\"><div style=\"font-size:14px;font-weight:600;color:#7d3b27;margin-bottom:6px;\">Search error</div><div style=\"font-size:13px;\">\'+esc(message||\'API 回傳錯誤\')+\'</div></div>\';}\n\n    function bindVideoEvents(item){\n      var videoEl=viewer.querySelector(\'video\');\n      if(!videoEl)return;\n      hasSentPlayForCurrent=false;\n      videoEl.addEventListener(\'loadedmetadata\',function(){try{if(item.type===\'video\'&&item.t_start>0&&item.t_start<videoEl.duration)videoEl.currentTime=item.t_start;}catch(e){}},false);\n      videoEl.addEventListener(\'play\',function(){if(!hasSentPlayForCurrent){hasSentPlayForCurrent=true;firePlayEvent(item);}},false);\n    }\n\n    function renderViewer(item){\n      if(!item)return;\n      currentId=item.moment_id;\n      if(item.type===\'video\'){\n        viewer.innerHTML=\'<video controls autoplay playsinline preload=\"metadata\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;display:block;background:#000;object-fit:contain;\"><source src=\"\'+esc(item.video_url)+\'\" type=\"video/mp4\"></video><div class=\"img-overlay\"></div>\';\n      }else{\n        viewer.innerHTML=\'<img class=\"main-img\" src=\"\'+esc(item.video_url)+\'\" alt=\"\'+esc(item.title)+\'\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;\"><div class=\"img-overlay\"></div>\';\n      }\n      mainTitle.textContent=item.title||\'Untitled\';\n      var metaLines=[esc(item.time||\'—\'),esc(item.folder||\'搜尋結果\'),esc(item.snippet||\'\')];\n      if(item.type===\'video\'&&item.t_start!=null)metaLines.push(\'Jump to \'+esc(secToClock(item.t_start)));\n      if(item.score!=null&&item.score!==\'\')metaLines.push(esc(scoreLabel(item.score)));\n      mainMeta.innerHTML=metaLines.join(\'<br>\');\n      bindVideoEvents(item);\n      pushRecent(item);\n      renderRecently();\n    }\n\n    function renderStrip(list){\n      if(!list||!list.length){strip.innerHTML=\'<div style=\"color:#999;font-size:13px;padding:10px 0;\">沒有符合條件的結果</div>\';return;}\n      strip.innerHTML=list.map(function(m){\n        var isActive=m.moment_id===currentId;\n        var isVid=m.type===\'video\';\n        var thumb=isVid\n          ?\'<img src=\"\'+esc(m.thumbnailUrl)+\'\" alt=\"\'+esc(m.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;\">\'\n           +\'<div class=\"clip-play-icon\"><div class=\"clip-play-icon-inner\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'\n           +\'<span class=\"clip-dur\">\'+esc(secToClock(m.t_start||0))+\'</span>\'\n          :\'<img src=\"\'+esc(m.video_url)+\'\" alt=\"\'+esc(m.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;\">\';\n        return \'<div class=\"clip-card \'+(isActive?\'active\':\'\')+\'\" data-id=\"\'+esc(m.moment_id)+\'\" data-url=\"\'+esc(m.video_url)+\'\" data-tstart=\"\'+Number(m.t_start||0)+\'\" data-isvid=\"\'+(isVid?\'1\':\'0\')+\'\">\'\n          +\'<div class=\"clip-thumb-wrap\">\'+thumb+\'<span class=\"clip-badge\">\'+(isVid?\'影片\':\'照片\')+\'</span></div>\'\n          +\'<div class=\"clip-info\"><div class=\"clip-title\">\'+esc(m.title)+\'</div>\'\n          +\'<div class=\"clip-sub\">\'+esc(m.snippet||\'\')+\'</div>\'\n          +(m.score!=null?\'<div class=\"clip-sub\" style=\"margin-top:2px;\">\'+esc(scoreLabel(m.score))+\'</div>\':\'\')\n          +\'</div></div>\';\n      }).join(\'\');\n\n      strip.querySelectorAll(\'.clip-card\').forEach(function(card){\n        var id=card.getAttribute(\'data-id\');\n        var isVid=card.getAttribute(\'data-isvid\')===\'1\';\n        var target=RAW_RESULTS.filter(function(x){return x.moment_id===id;})[0];\n        card.addEventListener(\'click\',function(){if(target){renderViewer(target);renderStrip(getFilteredList());fireClickEvent(target);}},false);\n        if(isVid&&target){\n          var vid=null,hoverTimer=null,thumbWrap=card.querySelector(\'.clip-thumb-wrap\');\n          card.addEventListener(\'mouseenter\',function(){hoverTimer=setTimeout(function(){if(!vid){vid=document.createElement(\'video\');vid.src=card.getAttribute(\'data-url\');vid.muted=true;vid.playsInline=true;vid.preload=\'metadata\';vid.style.cssText=\'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;\';thumbWrap.appendChild(vid);}vid.style.display=\'block\';try{vid.currentTime=Number(card.getAttribute(\'data-tstart\')||0);}catch(e){}vid.play().catch(function(){});},150);},false);\n          card.addEventListener(\'mouseleave\',function(){if(hoverTimer){clearTimeout(hoverTimer);hoverTimer=null;}if(vid){vid.pause();vid.style.display=\'none\';}},false);\n        }\n      });\n    }\n\n    function renderRecently(){\n      var list=getRecentStorage();\n      if(!list.length){recentList.innerHTML=\'<div style=\"font-size:12px;color:#999;line-height:1.8;\">目前還沒有 recently viewed</div>\';return;}\n      recentList.innerHTML=list.map(function(r){\n        var isVid=r.media_type===\'video\';\n        var thumbSrc=isVid?(r.thumbnailUrl||buildThumbUrl(r.video_id,r.t_start)):r.video_url;\n        var thumb=\'<img src=\"\'+esc(thumbSrc)+\'\" alt=\"\'+esc(r.title||\'\')+\'\" style=\"width:100%;height:100%;object-fit:cover;display:block;\">\'\n          +(isVid?\'<div class=\"rc-play-icon\"><div class=\"rc-play-icon-inner\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div><span class=\"rc-dur\">\'+esc(secToClock(r.t_start||0))+\'</span>\':\'\');\n        return \'<div class=\"rc-item\" data-id=\"\'+esc(r.moment_id||\'\')+\'\" data-url=\"\'+esc(r.video_url||\'\')+\'\" data-tstart=\"\'+Number(r.t_start||0)+\'\" data-isvid=\"\'+(isVid?\'1\':\'0\')+\'\">\'\n          +\'<div class=\"rc-thumb\">\'+thumb+\'</div>\'\n          +\'<div class=\"rc-info\"><div class=\"rc-name\">\'+esc(r.title||\'Untitled\')+\'</div><div class=\"rc-date\">\'+esc(r.time||\'—\')+\'</div><div class=\"rc-path\">\'+esc(r.folder||\'搜尋結果\')+\'</div><div class=\"rc-desc\">\'+esc(r.snippet||\'\')+\'</div></div></div>\';\n      }).join(\'\');\n\n      recentList.querySelectorAll(\'.rc-item\').forEach(function(itemEl){\n        var id=itemEl.getAttribute(\'data-id\');\n        var isVid=itemEl.getAttribute(\'data-isvid\')===\'1\';\n        itemEl.addEventListener(\'click\',function(){\n          var target=RAW_RESULTS.filter(function(x){return x.moment_id===id;})[0];\n          if(!target){var local=getRecentStorage().filter(function(x){return x.moment_id===id;})[0];if(local){target={moment_id:local.moment_id,video_id:local.video_id,title:local.title,snippet:local.snippet,video_url:local.video_url,type:local.media_type,t_start:Number(local.t_start||0),t_end:Number(local.t_end||0),durationSec:Number(local.durationSec||0),duration:local.duration||\'\',timeMs:Number(local.timeMs||0),time:local.time||\'—\',folder:local.folder||\'搜尋結果\',source:\'recent\',sizeKB:0,thumbnailUrl:local.thumbnailUrl||\'\'};}}\n          if(target){renderViewer(target);fireClickEvent(target);}\n        },false);\n        if(isVid){\n          var vid=null,hoverTimer=null,rcThumb=itemEl.querySelector(\'.rc-thumb\');\n          itemEl.addEventListener(\'mouseenter\',function(){hoverTimer=setTimeout(function(){if(!vid){vid=document.createElement(\'video\');vid.src=itemEl.getAttribute(\'data-url\');vid.muted=true;vid.playsInline=true;vid.preload=\'metadata\';vid.style.cssText=\'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;\';rcThumb.appendChild(vid);}vid.style.display=\'block\';try{vid.currentTime=Number(itemEl.getAttribute(\'data-tstart\')||0);}catch(e){}vid.play().catch(function(){});},150);},false);\n          itemEl.addEventListener(\'mouseleave\',function(){if(hoverTimer){clearTimeout(hoverTimer);hoverTimer=null;}if(vid){vid.pause();vid.style.display=\'none\';}},false);\n        }\n      });\n    }\n\n    /* =========================================================\n       getFilteredList — 排序用 sortBy × sortDir\n       檔案大小和時長因 API 欄位尚未提供，跳過不篩\n       ========================================================= */\n    function getFilteredList(){\n      var f=getF();\n      var r=RAW_RESULTS.slice();\n\n      /* 媒體類型 */\n      if(f.mediaType===\'image\')r=r.filter(function(m){return m.type===\'image\';});\n      else if(f.mediaType===\'video\')r=r.filter(function(m){return m.type===\'video\';});\n\n      /* 時間篩選 */\n      var df=f.dateFilter||{};\n      if(df.mode===\'Range\'&&df.start&&df.end){\n        var s=startOfDay(df.start.getTime()),e=endOfDay(df.end.getTime());\n        r=r.filter(function(m){return m.timeMs>=s&&m.timeMs<=e;});\n      }else if(df.mode===\'Before\'&&df.date){\n        r=r.filter(function(m){return m.timeMs<=endOfDay(df.date.getTime());});\n      }else if(df.mode===\'After\'&&df.date){\n        r=r.filter(function(m){return m.timeMs>=startOfDay(df.date.getTime());});\n      }\n\n      /* 排序 */\n      if(f.sortBy===\'time\'){\n        r.sort(function(a,b){return f.sortDir===\'asc\'?Number(a.timeMs||0)-Number(b.timeMs||0):Number(b.timeMs||0)-Number(a.timeMs||0);});\n      }else if(f.sortBy===\'size\'){\n        r.sort(function(a,b){return f.sortDir===\'asc\'?Number(a.sizeKB||0)-Number(b.sizeKB||0):Number(b.sizeKB||0)-Number(a.sizeKB||0);});\n      }else if(f.sortBy===\'name\'){\n        r.sort(function(a,b){var cmp=String(a.title||\'\').localeCompare(String(b.title||\'\'),undefined,{numeric:true,sensitivity:\'base\'});return f.sortDir===\'asc\'?cmp:-cmp;});\n      }\n\n      return r;\n    }\n\n    function applyFilter(){\n      var filtered=getFilteredList();\n      if(!filtered.length){renderEmptyState(currentQuery);return;}\n      var stillExists=filtered.some(function(x){return x.moment_id===currentId;});\n      if(!stillExists)renderViewer(filtered[0]);\n      renderStrip(filtered);\n    }\n\n    document.addEventListener(\'fp10ApplyFilter\',function(){applyFilter();});\n\n    async function fetchSearch(query,options){\n      options=options||{};\n      currentQuery=String(query||\'\').trim();\n      saveCurrentQuery(currentQuery);\n      stripKeyword.textContent=currentQuery||\'搜尋\';\n      if(options.logSearch!==false)fireSearchEvent(currentQuery);\n      renderLoadingState(currentQuery);\n      try{\n        var res=await fetch(SEARCH_API,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify({query:currentQuery})});\n        if(!res.ok)throw new Error(\'HTTP \'+res.status);\n        var json=await res.json();\n        var normalized=normalizeApiResponse(json);\n        if(!normalized.length){RAW_RESULTS=[];renderEmptyState(currentQuery);return;}\n        RAW_RESULTS=normalized;\n        var filtered=getFilteredList();\n        if(!filtered.length){renderEmptyState(currentQuery);return;}\n        renderViewer(filtered[0]);\n        renderStrip(filtered);\n        renderRecently();\n      }catch(err){\n        renderErrorState(currentQuery,err&&err.message?err.message:\'API 回傳錯誤\');\n      }\n    }\n\n    renderRecently();\n    fetchSearch(currentQuery,{logSearch:!FROM_PREVIOUS_PAGE});\n  }\n\n  boot();\n}; // end window._fp10Init\n\nif(document.readyState===\'complete\'||document.readyState===\'interactive\'){setTimeout(window._fp10Init,0);}\ndocument.addEventListener(\'DOMContentLoaded\',function(){setTimeout(window._fp10Init,100);},false);\nwindow.addEventListener(\'load\',function(){setTimeout(window._fp10Init,0);},false);\n(function retry(n){if(window._fp10Inited||n>50)return;setTimeout(function(){window._fp10Init();retry(n+1);},200);})(0);\n</script>\n<?php\n}, 999);','','global',0,10,1,'2026-05-22 05:45:23',1,NULL),
(37,'search-results','','\n/**\n * Momentry Search Chat CSS + JS\n * 覆盖版：新增底部搜索栏 Keyword / Semantic / People 模式选择。\n * 只在 search-chat 页面加载。\n */\n\n\n/*\n|--------------------------------------------------------------------------\n| Momentry Search Proxy\n| API Key must stay in PHP. Frontend only calls /wp-json/momentry/v1/search-proxy\n|--------------------------------------------------------------------------\n*/\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/search-proxy\', [\n    \'methods\'  => [\'GET\', \'POST\'],\n    \'permission_callback\' => \'__return_true\',\n\n    \'callback\' => function (WP_REST_Request $request) {\n\n      $base = \'http://192.168.110.201:3002\';\n      $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n      // Demo UUID provided for current search demo.\n      $demo_uuid = \'aeed71342a899fe4b4c57b7d41bcb692\';\n\n      $mode  = sanitize_text_field($request->get_param(\'mode\'));\n      $query = sanitize_text_field($request->get_param(\'query\'));\n\n      if (!$query) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => \'Missing query\'\n        ], 400);\n      }\n\n      if ($mode === \'semantic\') {\n\n        $url = $base . \'/api/v1/search/smart\';\n        $body = [\n          \'file_uuid\' => $demo_uuid,\n          \'query\'     => $query,\n          \'limit\'     => 20,\n          \'page\'      => 1,\n          \'page_size\' => 20,\n        ];\n\n        $args = [\n          \'method\'  => \'POST\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'Content-Type\' => \'application/json\',\n            \'X-API-Key\'    => $api_key,\n          ],\n          \'body\' => wp_json_encode($body),\n        ];\n\n      } elseif ($mode === \'people\') {\n\n        $url = $base . \'/api/v1/identities/search?q=\' . rawurlencode($query)\n     . \'&limit=20\'\n     . \'&page=1\'\n     . \'&page_size=20\';\n        $args = [\n          \'method\'  => \'GET\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'X-API-Key\' => $api_key,\n          ],\n        ];\n\n      } else {\n\n        // Default: keyword / universal search.\n        $url = $base . \'/api/v1/search/universal\';\n        $body = [\n          \'file_uuid\' => $demo_uuid,\n          \'query\'     => $query,\n          \'limit\'     => 20,\n          \'page\'      => 1,\n          \'page_size\' => 20,\n        ];\n\n        $args = [\n          \'method\'  => \'POST\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'Content-Type\' => \'application/json\',\n            \'X-API-Key\'    => $api_key,\n          ],\n          \'body\' => wp_json_encode($body),\n        ];\n      }\n\n      $response = wp_remote_request($url, $args);\n\n      if (is_wp_error($response)) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => $response->get_error_message(),\n        ], 500);\n      }\n\n      $code = wp_remote_retrieve_response_code($response);\n      $raw_body = wp_remote_retrieve_body($response);\n      $decoded = json_decode($raw_body, true);\n\n      if ($decoded === null && json_last_error() !== JSON_ERROR_NONE) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => \'Invalid JSON from upstream API\',\n          \'raw\'     => $raw_body,\n        ], $code ?: 500);\n      }\n\n      return new WP_REST_Response($decoded, $code);\n    }\n  ]);\n});\n\nadd_action(\'wp_head\', function () {\n  if (!is_page(\'search-chat\')) return;\n  ?>\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}\n/* ── Search mode selector: Keyword / Semantic / People ── */\n#msP .ms-chat-mode-wrap{\n  position:relative;\n  flex:0 0 auto;\n}\n\n#msP .ms-chat-mode-btn{\n  all:unset;\n  display:flex;\n  align-items:center;\n  gap:5px;\n  padding:6px 12px 6px 14px;\n  border-radius:999px;\n  font-size:13px;\n  font-weight:500;\n  color:rgba(0,0,0,.6);\n  cursor:pointer;\n  background:transparent;\n  transition:background .15s ease,color .15s ease;\n  white-space:nowrap;\n}\n\n#msP .ms-chat-mode-btn:hover{\n  background:rgba(0,0,0,.04);\n  color:rgba(0,0,0,.8);\n}\n\n#msP .ms-chat-mode-arrow{\n  font-size:12px;\n  line-height:1;\n  opacity:.75;\n  transition:transform .2s ease;\n}\n\n#msP .ms-chat-mode-btn.is-open .ms-chat-mode-arrow{\n  transform:rotate(180deg);\n}\n\n#msP .ms-chat-mode-menu{\n  display:block;\n  position:absolute;\n  right:0;\n  bottom:44px;\n  min-width:148px;\n  background:#fff;\n  border:1px solid rgba(0,0,0,.07);\n  border-radius:16px;\n  padding:6px;\n  box-shadow:0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);\n  z-index:999;\n  opacity:0;\n  transform:translateY(6px) scale(.97);\n  pointer-events:none;\n  transition:opacity .18s ease,transform .18s ease;\n}\n\n#msP .ms-chat-mode-menu.is-open{\n  opacity:1;\n  transform:translateY(0) scale(1);\n  pointer-events:auto;\n}\n\n#msP .ms-chat-mode-item{\n  display:flex;\n  align-items:center;\n  gap:9px;\n  padding:9px 12px;\n  border-radius:10px;\n  font-size:13px;\n  font-weight:450;\n  color:rgba(0,0,0,.65);\n  cursor:pointer;\n  user-select:none;\n  transition:background .12s ease,color .12s ease;\n}\n\n#msP .ms-chat-mode-item:hover{\n  background:rgba(0,0,0,.04);\n  color:rgba(0,0,0,.85);\n}\n\n#msP .ms-chat-mode-item.is-active{\n  background:rgba(0,0,0,.06);\n  color:#111;\n  font-weight:550;\n}\n\n#msP .ms-chat-mode-item-icon{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width:22px;\n  height:22px;\n  border-radius:6px;\n  background:rgba(0,0,0,.05);\n  flex:0 0 auto;\n  color:rgba(0,0,0,.5);\n}\n\n#msP .ms-chat-mode-item-icon svg{\n  display:block;\n}\n\n#msP .ms-chat-mode-item.is-active .ms-chat-mode-item-icon{\n  background:rgba(0,0,0,.08);\n  color:#111;\n}\n\n</style>\n  <?php\n});\n\nadd_action(\'wp_footer\', function () {\n  if (!is_page(\'search-chat\')) return;\n  ?>\n<script>\n	  window.renderFinderRows = window.renderFinderRows || function(){\n  return \'\';\n};\n\n(function(){\n\'use strict\';\n	\n	function renderFinderRows(){\n  return \'\';\n}\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_API_BASE = \'http://192.168.110.201:3002\';\nvar EVENT_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CURRENT_SEARCH_MODE = (new URLSearchParams(window.location.search).get(\'mode\') || \'keyword\').toLowerCase();\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\n// ====== 缩略图函数（使用 start_frame） ======\nfunction buildThumbUrl(videoId, startFrame){\n  if(!videoId) return \'\';\n  var url = new URL(\'/wp-json/momentry/v1/media\', window.location.origin);\n  url.searchParams.set(\'uuid\', videoId);\n  url.searchParams.set(\'type\', \'thumbnail\');\n  if(startFrame !== undefined) url.searchParams.set(\'frame\', startFrame);\n  return url.toString();\n}\n					\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\nfunction renderFinderRows(){\n  return \'\';\n}\n\n// ====== 映射单个 moment 到卡片数据 ======\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || moment.chunk_id || moment.identity_id || \'\';\n  var videoId  = moment.video_id || moment.file_uuid || \'\';\n\n  var tStart = Number(moment.t_start || moment.start_time || 0);\n  var tEnd   = Number(moment.t_end || moment.end_time || 0);\n  if(!tEnd || tEnd <= tStart) tEnd = tStart + 10;\n\n  var title =\n    moment.title ||\n    moment.name ||\n    moment.type ||\n    \'Search Result\';\n\n  var snippet =\n    moment.snippet ||\n    moment.text ||\n    moment.text_content ||\n    \'\';\n\n  var query = LAST_QUERY || \'\';\n\n  // 使用 chunk 的 start_frame，如果没有则用 tStart * FPS 计算\n  var FPS = 24;\n  var frameStart = moment.start_frame !== undefined\n    ? moment.start_frame\n    : Math.max(0, Math.round(tStart * FPS));\n\n  var detailParams = {\n    q: query,\n    query: query,\n    restore: 1,\n    moment_id: momentId,\n    video_id: videoId,\n    t_start: tStart,\n    t_end: tEnd,\n    title: title,\n    snippet: snippet,\n    video_url: \'\'\n  };\n\n  return {\n    id: momentId || (videoId + \'_\' + tStart),\n    momentId: momentId,\n    videoId: videoId,\n    type: \'video\',\n    title: title,\n    name: title,\n    snippet: snippet,\n    desc: snippet,\n    url:\n      \'/wp-json/momentry/v1/media?uuid=\'\n      + encodeURIComponent(videoId)\n      + \'&type=video\'\n      + \'&start_time=\' + encodeURIComponent(tStart)\n      + \'&end_time=\' + encodeURIComponent(tEnd),\n    videoUrl:\n      \'/wp-json/momentry/v1/media?uuid=\'\n      + encodeURIComponent(videoId)\n      + \'&type=video\'\n      + \'&start_time=\' + encodeURIComponent(tStart)\n      + \'&end_time=\' + encodeURIComponent(tEnd),\n    thumbnailUrl: buildThumbUrl(videoId, frameStart),\n    tStart: tStart,\n    tEnd: tEnd,\n    score: typeof moment.score === \'number\' ? moment.score : null,\n    date: \'\',\n    path: \'\',\n    duration: formatDuration(tEnd - tStart),\n    size: \'\',\n    pageUrl: buildQueryUrl(DETAIL_VIEW_URL, detailParams),\n    detailUrl: buildQueryUrl(DETAIL_VIEW_URL, detailParams)\n  };\n}\n					\nfunction mapResultsToCards(results){\n  var seen = {};\n\n  return (results || [])\n    .filter(function(moment){\n      var videoId = moment.video_id || moment.file_uuid || \'\';\n      var start = Number(moment.t_start || moment.start_time || 0).toFixed(1);\n      var name = moment.name || moment.identity_id || \'\';\n      var key = videoId + \'|\' + name + \'|\' + start;\n\n      if (seen[key]) return false;\n      seen[key] = true;\n      return true;\n    })\n    .map(function(moment){\n      return mapMomentToCard(moment);\n    });\n}\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var mode = CURRENT_SEARCH_MODE || \'keyword\';\n\n  return fetch(\'/wp-json/momentry/v1/search-proxy\', {\n    method: \'POST\',\n    headers: {\n      \'Content-Type\': \'application/json\'\n    },\n    body: JSON.stringify({\n      mode: mode,\n      query: query\n    })\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n if(c.type===\'video\'){\n  var video = document.getElementById(\'mmVideo\');\n\n  if(video){\n    video.addEventListener(\'canplay\', function(){\n      video.play().catch(function(err){\n        console.warn(\'video play failed:\', err);\n      });\n    }, {once:true});\n  }\n}\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\n\n/* ── Search mode selector: auto insert into existing search bar ── */\nfunction ensureSearchModeSelector(){\n  var wrap = document.querySelector(\'#msP .iwrap\');\n  var inputEl = document.getElementById(\'msInp\');\n  var micEl = document.querySelector(\'#msP .micbtn\');\n\n  if(!wrap || !inputEl) return;\n  if(document.getElementById(\'msChatModeWrap\')) return;\n\n  var holder = document.createElement(\'div\');\n  holder.className = \'ms-chat-mode-wrap\';\n  holder.id = \'msChatModeWrap\';\n  holder.innerHTML =\n    \'<button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\' +\n      \'<span id=\"msChatModeLabel\">Keyword</span>\' +\n      \'<span class=\"ms-chat-mode-arrow\">⌄</span>\' +\n    \'</button>\' +\n    \'<div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\' +\n      \'<div class=\"ms-chat-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>Keyword</span>\' +\n      \'</div>\' +\n      \'<div class=\"ms-chat-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>Semantic</span>\' +\n      \'</div>\' +\n      \'<div class=\"ms-chat-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>People</span>\' +\n      \'</div>\' +\n    \'</div>\';\n\n  if(micEl) wrap.insertBefore(holder, micEl);\n  else wrap.appendChild(holder);\n}\n\nfunction setChatMode(mode){\n  CURRENT_SEARCH_MODE = mode || \'keyword\';\n\n  var label =\n    CURRENT_SEARCH_MODE === \'semantic\' ? \'Semantic\' :\n    CURRENT_SEARCH_MODE === \'people\' ? \'People\' :\n    \'Keyword\';\n\n  var modeLabel = document.getElementById(\'msChatModeLabel\');\n  var modeMenu = document.getElementById(\'msChatModeMenu\');\n\n  if(modeLabel) modeLabel.textContent = label;\n\n  document.querySelectorAll(\'.ms-chat-mode-item\').forEach(function(item){\n    item.classList.toggle(\'is-active\', item.dataset.value === CURRENT_SEARCH_MODE);\n  });\n\n  if(modeMenu) modeMenu.classList.remove(\'is-open\');\n}\n\nfunction bindSearchModeSelector(){\n  ensureSearchModeSelector();\n\n  var modeBtn = document.getElementById(\'msChatModeBtn\');\n  var modeMenu = document.getElementById(\'msChatModeMenu\');\n\n  if(!modeBtn || !modeMenu || modeBtn.dataset.bound === \'1\') {\n    setChatMode(CURRENT_SEARCH_MODE);\n    return;\n  }\n\n  modeBtn.dataset.bound = \'1\';\n\n  modeBtn.addEventListener(\'click\', function(ev){\n    ev.stopPropagation();\n    modeMenu.classList.toggle(\'is-open\');\n  });\n\n  document.querySelectorAll(\'.ms-chat-mode-item\').forEach(function(item){\n    item.addEventListener(\'click\', function(ev){\n      ev.stopPropagation();\n      setChatMode(item.dataset.value);\n    });\n  });\n\n  document.addEventListener(\'click\', function(){\n    modeMenu.classList.remove(\'is-open\');\n  });\n\n  setChatMode(CURRENT_SEARCH_MODE);\n}\n\nbindSearchModeSelector();\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n\n</script>\n  <?php\n});\n','','global',0,10,1,'2026-05-28 01:47:38',1,NULL),
(38,'Login Form shortcode','<p>登入畫面包含輪播圖等等</p>','add_action(\'init\', function () {\n  if (empty($_GET[\'ms_login_local_img\'])) return;\n\n  $base = \'/Users/accusys/momentry/var/sftpgo/data/demo/\';\n  $file = basename($_GET[\'ms_login_local_img\']);\n  $path = $base . $file;\n\n  if (!file_exists($path)) {\n    status_header(404);\n    exit(\'Image not found\');\n  }\n\n  header(\'Content-Type: \' . mime_content_type($path));\n  header(\'Content-Length: \' . filesize($path));\n  readfile($path);\n  exit;\n});\n\nadd_shortcode(\'ms_login_form\', function () {\n\n  if (is_user_logged_in()) {\n    $logout_url = wp_logout_url(home_url(\'/login/?loggedout=true\'));\n\n    return \'\n    <style>\n      html, body{\n        margin:0 !important;\n        padding:0 !important;\n        background:rgb(247,247,248) !important;\n      }\n\n      #ms-login-wrap,\n      #ms-login-wrap *{\n        box-sizing:border-box;\n      }\n\n      #ms-login-wrap{\n        width:100%;\n        min-height:100vh;\n        display:flex;\n        align-items:center;\n        justify-content:center;\n        padding:40px 20px;\n        background:rgb(247,247,248);\n        font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n      }\n\n      #ms-logged-in-card{\n        width:min(520px, 100%);\n        background:white;\n        border:1px solid rgb(229,231,235);\n        border-radius:24px;\n        padding:32px;\n        box-shadow:0 20px 60px rgba(0,0,0,.10);\n        color:rgb(17,24,39);\n      }\n\n      #ms-logged-in-card a{\n        color:rgb(95,134,210);\n        text-decoration:none;\n        font-weight:700;\n      }\n\n      #ms-logged-in-card .ms-login-hint{\n        margin:0 0 20px 0;\n        font-size:18px;\n        opacity:.82;\n      }\n    </style>\n\n    <div id=\"ms-login-wrap\">\n      <div id=\"ms-logged-in-card\">\n        <p class=\"ms-login-hint\">You are already logged in.</p>\n        <p><a href=\"\' . esc_url(home_url(\'/lt-searching/\')) . \'\">Go to Playground</a></p>\n        <p><a href=\"\' . esc_url($logout_url) . \'\">Log out</a></p>\n      </div>\n    </div>\';\n  }\n\n  $redirect_to = !empty($_GET[\'redirect_to\'])\n    ? esc_url_raw($_GET[\'redirect_to\'])\n    : home_url(\'/lt-searching/\');\n\n  ob_start(); ?>\n\n  <style>\n   html, body{\n  margin:0 !important;\n  padding:0 !important;\n  background:rgb(247,247,248) !important;\n  overflow:hidden !important;\n}\n\n    .wp-site-blocks,\n    .site,\n    .site-content,\n    main,\n    .content,\n    .entry-content,\n    .wp-block-post-content,\n    .is-layout-constrained,\n    .is-layout-flow{\n      max-width:none !important;\n      width:100% !important;\n      margin:0 !important;\n      padding:0 !important;\n      background:rgb(247,247,248) !important;\n    }\nbody .is-layout-constrained > *{\n  max-width:none !important;\n}\n\nbody .entry-content > *{\n  max-width:none !important;\n}\n\nbody .wp-block-post-content > *{\n  max-width:none !important;\n}\n\nbody .wp-site-blocks{\n  max-width:none !important;\n  width:100% !important;\n  overflow:hidden !important;\n}\n    header,\n    footer{\n      display:none !important;\n    }\n\n    #ms-login-wrap,\n    #ms-login-wrap *{\n      box-sizing:border-box;\n    }\n\n    #ms-login-wrap{\n  width:100%;\n  height:100dvh;\n  margin:0;\n  overflow:hidden;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  padding:0 20px;      background:rgb(247,247,248);\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n    }\n#ms-login-shell{\n  width:min(960px, 80vw);\n  aspect-ratio:1.35 / 1;\n  min-height:0;\n  max-height:440px;\n\n  display:flex;\n\n  background:white;\n  border-radius:28px;\n  overflow:hidden;\n\n  box-shadow:0 22px 70px rgba(15,23,42,.12);\n  border:1px solid rgb(229,231,235);\n}\n\n\n#ms-login-visual{\n  position:relative;\n  width:58%;\n  min-height:0;\n\n  overflow:hidden;\n\nbackground:rgb(247,247,248);\n			  }\n\n.ms-slide{\n  position:absolute;\n\n  inset:0;\n\n  width:100%;\n  height:100%;\ndisplay:block;\n	backface-visibility:hidden;\ntransform:translateZ(0);\n  object-fit:cover;\n  object-position:center;\n\n  opacity:0;\n\ntransition:none;}\n\n.ms-slide.active{\n  opacity:1;\n}\n\n    #ms-login-card{\n  width:40%;\n  min-height:0;\n  padding:22px 34px;\n  background:white;\n  color:rgb(17,24,39);\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  overflow:hidden;\n}\n\n    #ms-login-card h3{\n  margin:0 0 20px 0;\n  font-size:22px;\n  line-height:1.2;\n  letter-spacing:-.02em;\n  color:rgb(17,24,39);\n  font-weight:800;\n  white-space:nowrap;\n  text-align:center;\n}\n\n    #ms-login-card form{\n      margin:0;\n      width:100%;\n    }\n\n    #ms-login-card .ms-field{\n      margin:0 0 16px 0;\n    }\n\n    #ms-login-card label{\n      display:block;\n      margin:0 0 10px 0;\n      font-size:12px;\n      font-weight:800;\n      letter-spacing:.08em;\n      color:rgb(138,143,152);\n    }\n\n    #ms-login-card input[type=\"text\"],\n#ms-login-card input[type=\"password\"]{\n  display:block;\n  width:100%;\n  height:46px;\n  margin:0;\n  padding:12px 14px;\n  border:1px solid rgb(209,213,219);\n  border-radius:14px;\n  background:white;\n  color:rgb(17,24,39);\n  outline:none;\n  box-shadow:none;\n  font-size:14px;\n}\n\n    #ms-login-card input[type=\"text\"]:focus,\n    #ms-login-card input[type=\"password\"]:focus{\n      border-color:rgb(118,153,216);\n      box-shadow:0 0 0 4px rgba(118,153,216,.16);\n    }\n\n    #ms-login-card .ms-password-label-row{\n      display:flex;\n      justify-content:space-between;\n      align-items:center;\n      gap:16px;\n      margin:0 0 10px 0;\n    }\n\n    #ms-login-card .ms-password-label-row label{\n      margin:0;\n    }\n\n    #ms-login-card .ms-forgot-link{\n      font-size:12px;\n      color:rgb(138,143,152);\n      letter-spacing:.06em;\n      text-decoration:none;\n      font-weight:700;\n      white-space:nowrap;\n    }\n\n    #ms-login-card .ms-forgot-link:hover{\n      color:rgb(95,134,210);\n      text-decoration:underline;\n    }\n\n    #ms-login-card button{\n  display:block;\n  width:100%;\n  height:48px;\n  margin:0;\n  padding:12px 16px;\n  border:0;\n  border-radius:14px;\n  background:rgb(118,153,216);\n  color:white;\n  font-size:15px;\n  font-weight:800;\n  cursor:pointer;\n}\n\n    #ms-login-card button:hover{\n      background:rgb(95,134,210);\n    }\n#ms-login-card .ms-login-hint{\n  margin:10px 0 0 0;\n  font-size:12px;\n  color:rgb(102,112,133);\n  line-height:1.6;\n  letter-spacing:.04em;\n  text-align:center;\n}\n\n    #ms-login-card .ms-login-error{\n      margin:0 0 20px 0;\n      padding:12px 14px;\n      border-radius:14px;\n      background:rgb(255,241,242);\n      border:1px solid rgb(254,205,211);\n      color:rgb(190,18,60);\n      font-size:14px;\n      font-weight:700;\n    }\n\n    @media (max-width:900px){\n      #ms-login-shell{\n        width:min(560px, 94vw);\n        min-height:auto;\n        display:block;\n      }\n\n      #ms-login-visual{\n        width:100%;\n        min-height:360px;\n      }\n\n      #ms-login-card{\n        width:100%;\n        min-height:auto;\n        padding:44px 34px 42px;\n      }\n\n      #ms-login-card h3{\n        white-space:normal;\n      }\n    }\n.ms-carousel-btn{\n  position:absolute;\n  top:50%;\n  transform:translateY(-50%);\n  z-index:5;\n\n  width:40px;\n  height:40px;\n\n  border:0;\n  border-radius:999px;\n\n  background:rgba(255,255,255,.82);\n\n  color:rgb(120,126,136);\n\n  font-size:28px;\n  font-weight:800;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  cursor:pointer;\n\n  box-shadow:0 8px 24px rgba(15,23,42,.18);\n\n  padding:0;\n}\n\n.ms-prev{\n  left:18px;\n}\n\n.ms-next{\n  right:18px;\n}\n\n.ms-carousel-dots{\n  position:absolute;\n  left:50%;\n  bottom:26px;\n  transform:translateX(-50%);\n  z-index:6;\n  display:flex;\n  gap:12px;\n  align-items:center;\n}\n\n.ms-dot{\n  width:12px;\n  height:12px;\n  border:0;\n  border-radius:999px;\n  background:rgba(17,24,39,.18);\n  cursor:pointer;\n}\n\n.ms-dot.active{\n  background:rgba(17,24,39,.72);\n}\n  </style>\n\n  <div id=\"ms-login-wrap\">\n    <div id=\"ms-login-shell\">\n\n <div id=\"ms-login-visual\">\n  <img class=\"ms-slide active\" decoding=\"async\" loading=\"eager\" src=\"<?php echo esc_url(home_url(\'/?ms_local_image=\' . rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Carousel01.png\'))); ?>\" alt=\"Momentry Studio\">\n\n<img class=\"ms-slide\" decoding=\"async\" loading=\"eager\" src=\"<?php echo esc_url(home_url(\'/?ms_local_image=\' . rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Carousel02.png\'))); ?>\" alt=\"Momentry Studio\">\n\n<img class=\"ms-slide\" decoding=\"async\" loading=\"eager\" src=\"<?php echo esc_url(home_url(\'/?ms_local_image=\' . rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Carousel03.png\'))); ?>\" alt=\"Momentry Studio\">\n\n<img class=\"ms-slide\" decoding=\"async\" loading=\"eager\" src=\"<?php echo esc_url(home_url(\'/?ms_local_image=\' . rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Carousel04.png\'))); ?>\" alt=\"Momentry Studio\">\n			  \n			  \n			  \n			  \n			  \n			  \n<button class=\"ms-carousel-btn ms-prev\" type=\"button\">❮</button>\n<button class=\"ms-carousel-btn ms-next\" type=\"button\">❯</button>\n  <div class=\"ms-carousel-dots\">\n    <button class=\"ms-dot active\" type=\"button\"></button>\n    <button class=\"ms-dot\" type=\"button\"></button>\n    <button class=\"ms-dot\" type=\"button\"></button>\n			      <button class=\"ms-dot\" type=\"button\"></button>\n\n  </div>\n</div>\n\n			  \n			  \n      <div id=\"ms-login-card\">\n\n        <h3>Log in to Momentry Studio</h3>\n\n        <?php if (isset($_GET[\'login\']) && $_GET[\'login\'] === \'failed\'): ?>\n          <div class=\"ms-login-error\">\n            Incorrect username or password, please try again.\n          </div>\n        <?php endif; ?>\n\n        <form method=\"post\" action=\"<?php echo esc_url(wp_login_url()); ?>\">\n\n          <div class=\"ms-field\">\n            <label for=\"ms-log\">Username/Email</label>\n            <input id=\"ms-log\" type=\"text\" name=\"log\" autocomplete=\"username\" required>\n          </div>\n\n          <div class=\"ms-field\">\n            <div class=\"ms-password-label-row\">\n              <label for=\"ms-pwd\">Password</label>\n              <a class=\"ms-forgot-link\" href=\"<?php echo esc_url(home_url(\'/forgot-password/\')); ?>\">\n                Forgot password?\n              </a>\n            </div>\n\n            <input id=\"ms-pwd\" type=\"password\" name=\"pwd\" autocomplete=\"current-password\" required>\n          </div>\n\n          <input type=\"hidden\" name=\"redirect_to\" value=\"<?php echo esc_attr($redirect_to); ?>\">\n\n          <div class=\"ms-field\">\n            <button type=\"submit\">Log in</button>\n          </div>\n\n          <p class=\"ms-login-hint\">\n            After logging in, you will be redirected to Momentry Studio.\n          </p>\n\n        </form>\n\n      </div>\n\n    </div>\n  </div>\n<script>\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n\n  const slides = document.querySelectorAll(\'#ms-login-visual .ms-slide\');\n  const dots = document.querySelectorAll(\'#ms-login-visual .ms-dot\');\n  const prev = document.querySelector(\'#ms-login-visual .ms-prev\');\n  const next = document.querySelector(\'#ms-login-visual .ms-next\');\n\n  if (!slides.length) return;\n\n  let current = 0;\n  let timer = null;\n\n  function showSlide(index){\n    slides[current].classList.remove(\'active\');\n    if (dots[current]) dots[current].classList.remove(\'active\');\n\n    current = (index + slides.length) % slides.length;\n\n    slides[current].classList.add(\'active\');\n    if (dots[current]) dots[current].classList.add(\'active\');\n  }\n\n  function startAutoPlay(){\n    timer = setInterval(function(){\n      showSlide(current + 1);\n    }, 30000);\n  }\n\n  function resetAutoPlay(){\n    clearInterval(timer);\n    startAutoPlay();\n  }\n\n  if (prev) {\n    prev.addEventListener(\'click\', function(){\n      showSlide(current - 1);\n      resetAutoPlay();\n    });\n  }\n\n  if (next) {\n    next.addEventListener(\'click\', function(){\n      showSlide(current + 1);\n      resetAutoPlay();\n    });\n  }\n\n  dots.forEach(function(dot, index){\n    dot.addEventListener(\'click\', function(){\n      showSlide(index);\n      resetAutoPlay();\n    });\n  });\nconst visual = document.querySelector(\'#ms-login-visual\');\n\nif (visual) {\n  visual.addEventListener(\'mouseenter\', function(){\n    clearInterval(timer);\n  });\n\n  visual.addEventListener(\'mouseleave\', function(){\n    startAutoPlay();\n  });\n}\n  startAutoPlay();\n\n});\n</script>\n  <?php\n  return ob_get_clean();\n});\n','登入畫面包含輪播圖等等','global',0,10,1,'2026-05-29 10:01:44',1,NULL),
(39,'LT-lastest-layor bar','','\nif (!function_exists(\'ms_switch_get_store\')) {\n  function ms_switch_get_store($user_id) {\n    $store = get_user_meta($user_id, \'_ms_switch_store\', true);\n    return is_array($store) ? $store : [];\n  }\n}\n\nif (!function_exists(\'ms_switch_save_store\')) {\n  function ms_switch_save_store($user_id, $store) {\n    update_user_meta($user_id, \'_ms_switch_store\', $store);\n  }\n}\n\nif (!function_exists(\'ms_switch_cleanup_store\')) {\n  function ms_switch_cleanup_store($store) {\n    $now = time();\n    if (!is_array($store)) return [];\n\n    foreach ($store as $device_key => $row) {\n      if (\n        empty($row[\'expires\']) ||\n        !is_numeric($row[\'expires\']) ||\n        (int) $row[\'expires\'] < $now\n      ) {\n        unset($store[$device_key]);\n      }\n    }\n    return $store;\n  }\n}\n\nif (!function_exists(\'ms_switch_register_device_token\')) {\n  function ms_switch_register_device_token($user_id, $device_key) {\n    $store = ms_switch_cleanup_store(ms_switch_get_store($user_id));\n\n    $selector  = wp_generate_password(12, false, false);\n    $validator = wp_generate_password(32, false, false);\n    $token     = $selector . \'.\' . $validator;\n    $expires   = time() + DAY_IN_SECONDS;\n\n    $store[$device_key] = [\n      \'selector\' => $selector,\n      \'hash\'     => wp_hash_password($validator),\n      \'expires\'  => $expires,\n      \'issued\'   => time(),\n    ];\n\n    ms_switch_save_store($user_id, $store);\n\n    return [\n      \'token\'   => $token,\n      \'expires\' => $expires,\n    ];\n  }\n}\n\nif (!function_exists(\'ms_switch_verify_token\')) {\n  function ms_switch_verify_token($user_id, $device_key, $token) {\n    if (!$user_id || !$device_key || !$token) return false;\n\n    $store = ms_switch_cleanup_store(ms_switch_get_store($user_id));\n    ms_switch_save_store($user_id, $store);\n\n    if (empty($store[$device_key])) return false;\n\n    $row = $store[$device_key];\n\n    if (empty($row[\'selector\']) || empty($row[\'hash\']) || empty($row[\'expires\'])) {\n      return false;\n    }\n\n    if ((int) $row[\'expires\'] < time()) {\n      return false;\n    }\n\n    $parts = explode(\'.\', $token, 2);\n    if (count($parts) !== 2) return false;\n\n    list($selector, $validator) = $parts;\n\n    if (!hash_equals((string) $row[\'selector\'], (string) $selector)) {\n      return false;\n    }\n\n    if (!wp_check_password($validator, $row[\'hash\'])) {\n      return false;\n    }\n\n    return true;\n  }\n}\n\n/* =========================================================\n * 2) REST API\n * ========================================================= */\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/register-switch-device\', [\n    \'methods\'  => \'POST\',\n    \'permission_callback\' => function () {\n      return is_user_logged_in();\n    },\n    \'callback\' => function (WP_REST_Request $request) {\n      $user = wp_get_current_user();\n      if (!$user || !$user->ID) {\n        return new WP_REST_Response([\n          \'ok\' => false,\n          \'message\' => \'Not logged in\'\n        ], 401);\n      }\n\n      $device_key = sanitize_text_field((string) $request->get_param(\'device_key\'));\n      if (!$device_key) {\n        return new WP_REST_Response([\n          \'ok\' => false,\n          \'message\' => \'Missing device_key\'\n        ], 400);\n      }\n\n      $issued = ms_switch_register_device_token($user->ID, $device_key);\n\n      return new WP_REST_Response([\n        \'ok\' => true,\n        \'data\' => [\n          \'token\'   => $issued[\'token\'],\n          \'expires\' => $issued[\'expires\'],\n          \'login\'   => $user->user_login,\n        ]\n      ]);\n    }\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/account-switch\', [\n    \'methods\'  => \'POST\',\n    \'permission_callback\' => function () {\n      return is_user_logged_in();\n    },\n    \'callback\' => function (WP_REST_Request $request) {\n      $target_login = sanitize_user((string) $request->get_param(\'login\'));\n      $device_key   = sanitize_text_field((string) $request->get_param(\'device_key\'));\n      $switch_token = sanitize_text_field((string) $request->get_param(\'switch_token\'));\n\n      if (!$target_login || !$device_key || !$switch_token) {\n        return new WP_REST_Response([\n          \'ok\' => false,\n          \'message\' => \'Missing switch data\',\n          \'requires_login\' => true\n        ], 400);\n      }\n\n      $target_user = get_user_by(\'login\', $target_login);\n      if (!$target_user || !$target_user->ID) {\n        return new WP_REST_Response([\n          \'ok\' => false,\n          \'message\' => \'Target user not found\',\n          \'requires_login\' => true\n        ], 404);\n      }\n\n      $valid = ms_switch_verify_token($target_user->ID, $device_key, $switch_token);\n\n      if (!$valid) {\n        return new WP_REST_Response([\n          \'ok\' => false,\n          \'message\' => \'Token invalid or expired\',\n          \'requires_login\' => true\n        ], 403);\n      }\n\n      wp_clear_auth_cookie();\n      wp_set_current_user($target_user->ID);\n      wp_set_auth_cookie($target_user->ID, true, is_ssl());\n\n      do_action(\'wp_login\', $target_user->user_login, $target_user);\n\n      return new WP_REST_Response([\n        \'ok\' => true,\n        \'data\' => [\n          \'redirect\' => home_url(\'/search/\'),\n          \'login\'    => $target_user->user_login,\n        ]\n      ]);\n    }\n  ]);\n\n});\n\n/* =========================================================\n * 3) Main layer wrapper\n * ========================================================= */\nadd_filter(\'the_content\', function ($content) {\n\n  if (!is_page([\n    \'lt-searching\',\n    \'search-chat\',\n    \'upgrade-plan\',\n    \'personalization\',\n    \'settings\',\n    \'help\',\n    \'ww-04-07-api\',\n    \'library\',\n    \'people\',\n	  \'progress\',\n	  \'momentry-api-console\',\n	  \'logs\',\n	  	  \'metrics\',\n	  \'measure\',\n	  \'Evaluation\',\n	  \'raptor-api-console\',\n	  	  \'demo\'\n\n\n  ])) return $content;\n\n  if (strpos($content, \'class=\"ms-app\"\') !== false) return $content;\n\n  $is_search_lab     = is_page(\'search-lab\');\n  $can_view_search_lab = true;\n  if ($is_search_lab) {\n    if (!is_user_logged_in()) {\n      $can_view_search_lab = false;\n    } else {\n      $u_check = wp_get_current_user();\n      $allowed_roles = [\'administrator\', \'editor\'];\n      $can_view_search_lab = !empty(array_intersect($allowed_roles, (array) $u_check->roles));\n    }\n  }\n\n  $home_url = home_url(\'/lt-searching/\');\n  $login_url = wp_login_url($home_url);\n  $logout_login_template = wp_logout_url(add_query_arg(\'ms_prefill\', \'__LOGIN__\', $login_url));\n  $logout_to_login = wp_logout_url($login_url);\n\n  ob_start(); ?>\n\n  <style>\n	  .gs-nav-icon{\n  width:24px;\n  height:24px;\n  object-fit:contain;\n  flex-shrink:0;\n}\n    :root{\n      --ms-accent:#8fbef8;\n      --ms-accent-soft:#eaf2ff;\n      --ms-accent-text:#1967d2;\n    }\n\n    html, body {\n      background: #ffffff !important;\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    }\n\n    .ms-app {\n      display: flex;\n      height: calc(100vh - 56px);\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 28px;\n      gap: 28px;\n      box-sizing: border-box;\n      background: #ffffff !important;\n      align-items: stretch;\n    }\n\n    .ms-side {\n      width: 240px;\n      min-width: 240px;\n      flex-shrink: 0;\n      background: #ffffff !important;\n      border-radius: 18px;\n      padding: 18px 14px;\n      box-shadow:\n        0 16px 38px rgba(0,0,0,0.10),\n        0 2px 8px rgba(0,0,0,0.06);\n      display: flex;\n      flex-direction: column;\n      overflow: visible;\n      position: relative;\n      z-index: 20;\n      height: 100%;\n      min-height: 0;\n    }\n\n    .gs-logo {\n      font-size: 15px;\n      font-weight: 600;\n      color: #202124;\n      padding: 8px 12px 16px 12px;\n      flex-shrink: 0;\n    }\n\n    .gs-nav {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex-shrink: 0;\n    }\n\n    .gs-nav a {\n		font-size:18px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      height: 48px;\n      padding: 0 12px;\n      border-radius: 10px;\n      text-decoration: none;\n      color: #3c4043;\n      font-weight: 600;\n      line-height: 1;\n      background: transparent;\n      transition: none !important;\n      transform: none !important;\n      backface-visibility: visible;\n      box-sizing: border-box;\n    }\n\n    .gs-nav a:hover {\n      background: var(--ms-accent-soft);\n      color: var(--ms-accent-text);\n    }\n\n    .gs-nav a.active,\n    .gs-nav a.search-lab-link.active {\n      background: var(--ms-accent-soft) !important;\n      color: var(--ms-accent-text) !important;\n      font-weight: 600;\n    }\n\n    .gs-divider {\n      height: 1px;\n      background: #eee;\n      margin: 14px 8px;\n      flex-shrink: 0;\n    }\n\n    .ms-history-head {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 0 10px 6px;\n      flex-shrink: 0;\n    }\n\n    .ms-history-head span:first-child {\n      font-size: 11px;\n      color: #9aa0a6;\n      text-transform: uppercase;\n    }\n\n    #msNewChat {\n      font-size: 12px;\n      color: var(--ms-accent-text);\n      cursor: pointer;\n    }\n\n    .ms-history-wrap {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 0 6px 6px 6px;\n      margin-bottom: 10px;\n    }\n\n    .ms-history-wrap::-webkit-scrollbar { width: 4px; }\n    .ms-history-wrap::-webkit-scrollbar-thumb { background: #d6dbe1; border-radius: 999px; }\n\n    .ms-history-item {\n      padding: 8px 10px;\n      border-radius: 8px;\n      font-size: 12px;\n      color: #3c4043;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .ms-history-item:hover { background: #f1f3f4; }\n    .ms-history-item.active { background: var(--ms-accent-soft); color: var(--ms-accent-text); font-weight: 600; }\n\n    .ms-history-title {\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      flex: 1;\n    }\n\n    .ms-history-menu {\n      font-size: 14px;\n      color: #999;\n      margin-left: 6px;\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .ms-menu-item { padding: 10px 16px; cursor: pointer; }\n    .ms-menu-item:hover { background: #f5f6f8; }\n    .ms-menu-item[data-action=\"delete\"] { color: #d93025; font-weight: 600; }\n\n    .ms-main {\n      flex: 1;\n      min-width: 0;\n      background: #ffffff !important;\n      border-radius: 18px;\n      padding: 36px 42px;\n      box-shadow: none;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n\n    .gs-user {\n      margin-top: auto;\n      padding: 10px 12px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      background: #f8f9fa;\n      cursor: pointer;\n      position: relative;\n      overflow: visible;\n      text-decoration: none;\n      flex-shrink: 0;\n    }\n\n    .gs-avatar {\n      width: 34px;\n      height: 34px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      background: #ececec;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .gs-user-info { font-size: 12px; line-height: 1.2; min-width: 0; }\n    .gs-user-name {\n      font-size: 13px;\n      font-weight: 600;\n      color: #202124;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .gs-user-plan { font-size: 11px; color: #5f6368; }\n\n    .gs-user-menu {\n      display: none;\n      position: absolute;\n      left: 0;\n      bottom: calc(100% + 10px);\n      width: 260px;\n      background: #fff;\n      border-radius: 18px;\n      box-shadow: 0 12px 40px rgba(0,0,0,.15);\n      border: 1px solid rgba(17, 24, 39, 0.06);\n      padding: 10px 0 18px 0;\n      z-index: 9999;\n      overflow: visible;\n      outline: none !important;\n    }\n\n    .gs-user-menu.show { display: block; }\n\n    .gs-user-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }\n    .gs-avatar-lg {\n      width: 42px;\n      height: 42px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      background: #ececec;\n    }\n    .gs-user-card-name { font-weight: 600; font-size: 15px; color: #202124; }\n    .gs-user-handle { font-size: 13px; color: #777; }\n    .gs-menu-divider { height: 1px; background: #eee; margin: 8px 0; }\n\n    .gs-menu-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 18px;\n      text-decoration: none;\n      color: #222;\n      font-size: 14px;\n      position: relative;\n      border: none !important;\n      outline: none !important;\n      box-shadow: none !important;\n      background: transparent;\n    }\n\n    .gs-menu-item:hover { background: #f3f4f6; }\n    .gs-menu-item.logout { color: #c62828; }\n\n    .gs-switch-wrap { position: relative; overflow: visible; }\n\n    .gs-switch-pop {\n      display: none;\n      position: absolute;\n      left: calc(100% + 8px);\n      bottom: -10px;\n      top: auto;\n      width: 300px;\n      max-height: 420px;\n      overflow-y: auto;\n      background: #fff;\n      border: none;\n      border-radius: 16px;\n      box-shadow: 0 16px 40px rgba(0,0,0,.14);\n      padding: 10px 0;\n      z-index: 99999;\n      outline: none !important;\n    }\n\n    .gs-switch-pop.show { display: block; }\n    .gs-switch-pop-head { font-size: 15px; font-weight: 700; color: #202124; padding: 4px 14px 2px; }\n    .gs-switch-pop-sub { font-size: 12px; color: #6b7280; padding: 0 14px 10px; line-height: 1.4; }\n    .gs-switch-pop-list {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 0 10px 8px;\n      max-height: 260px;\n      overflow-y: auto;\n    }\n\n    .gs-switch-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      border-radius: 12px;\n      border: 1px solid #eceff3;\n      cursor: pointer;\n      transition: .15s ease;\n      background: #fff;\n      outline: none !important;\n      box-shadow: none !important;\n    }\n\n    .gs-switch-item:hover {\n      background: #f8fafc;\n      border-color: #dbe3ea;\n    }\n\n    .gs-switch-item img {\n      width: 38px;\n      height: 38px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n      background: #ececec;\n    }\n\n    .gs-switch-meta { min-width: 0; flex: 1; }\n    .gs-switch-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: #202124;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .gs-switch-login {\n      font-size: 12px;\n      color: #6b7280;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .gs-switch-badge {\n      display: inline-block;\n      margin-top: 4px;\n      font-size: 11px;\n      color: #0f766e;\n      background: #ecfdf5;\n      border: 1px solid #d1fae5;\n      border-radius: 999px;\n      padding: 2px 8px;\n    }\n\n    .gs-switch-pop-divider { height: 1px; background: #eee; margin: 6px 0; }\n    .gs-switch-pop-action {\n      display: block;\n      padding: 10px 14px;\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--ms-accent-text);\n      text-decoration: none;\n      outline: none !important;\n      box-shadow: none !important;\n      border: none !important;\n    }\n\n    .gs-switch-pop-action:hover { background: #f5f7fb; }\n    .gs-switch-empty, .gs-switch-note { padding: 10px 12px; font-size: 12px; color: #6b7280; }\n\n    .site, .site-content, .content-area {\n      background: #ffffff !important;\n      border-radius: 28px !important;\n      overflow: hidden;\n      box-shadow: none !important;\n    }\n\n    .gs-nav > a:first-child,\n    .gs-nav a.search-lab-link{\n      background: transparent;\n      color: #3c4043;\n    }\n\n    .gs-nav > a:first-child:hover,\n    .gs-nav a.search-lab-link:hover{\n      background: var(--ms-accent-soft);\n      color: var(--ms-accent-text);\n    }\n\n    /* ===== Personalization ===== */\n    .gs-menu-item.gs-personalization-row{\n      justify-content: space-between;\n      gap: 8px;\n      cursor: pointer;\n      padding-right: 8px;\n      outline: none !important;\n      box-shadow: none !important;\n      border: none !important;\n    }\n\n    .gs-personalization-link{\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      color: #222;\n      text-decoration: none;\n      min-width: 0;\n      flex: 1 1 auto;\n      max-width: calc(100% - 132px);\n      outline: none !important;\n      box-shadow: none !important;\n      border: none !important;\n      background: transparent;\n    }\n\n    .gs-personalization-link:hover{\n      color: #222;\n      text-decoration: none;\n    }\n\n    .gs-theme-switcher{\n      display: none;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 6px;\n      border: 1px solid #e8eaed;\n      border-radius: 999px;\n      background: #fff;\n      flex-shrink: 0;\n      margin-left: auto;\n      transform: translateX(58px);\n      position: relative;\n      right: -8px;\n      outline: none !important;\n      box-shadow: none !important;\n    }\n\n    .gs-theme-switcher.show{ display: flex; }\n\n    .gs-theme-dot{\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);\n      transition: transform .15s ease, box-shadow .15s ease;\n      outline: none !important;\n      appearance: none;\n      -webkit-appearance: none;\n    }\n\n    .gs-theme-dot:hover{ transform: scale(1.08); }\n    .gs-theme-dot.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.16); }\n\n    .gs-theme-dot[data-theme=\"blue\"]   { background: #9ec5fe; }\n    .gs-theme-dot[data-theme=\"green\"]  { background: #cddc7c; }\n    .gs-theme-dot[data-theme=\"yellow\"] { background: #f1d46a; }\n    .gs-theme-dot[data-theme=\"orange\"] { background: #efb07b; }\n    .gs-theme-dot[data-theme=\"dark\"]   { background: #666; }\n    .gs-theme-dot[data-theme=\"light\"]  { background: #f3f3f3; }\n\n    /* ===== remove all black / blue focus boxes ===== */\n    .gs-user, .gs-user:focus, .gs-user:active, .gs-user:focus-visible,\n    .gs-user-menu, .gs-user-menu:focus, .gs-user-menu:active, .gs-user-menu:focus-visible,\n    .gs-menu-item, .gs-menu-item:focus, .gs-menu-item:active, .gs-menu-item:focus-visible,\n    .gs-menu-item a, .gs-menu-item a:focus, .gs-menu-item a:active, .gs-menu-item a:focus-visible,\n    .gs-personalization-link, .gs-personalization-link:focus, .gs-personalization-link:active, .gs-personalization-link:focus-visible,\n    .gs-switch-pop, .gs-switch-pop:focus, .gs-switch-pop:active, .gs-switch-pop:focus-visible,\n    .gs-switch-item, .gs-switch-item:focus, .gs-switch-item:active, .gs-switch-item:focus-visible,\n    .gs-switch-pop-action, .gs-switch-pop-action:focus, .gs-switch-pop-action:active, .gs-switch-pop-action:focus-visible,\n    #gsAvatarBtn, #gsAvatarBtn:focus, #gsAvatarBtn:active, #gsAvatarBtn:focus-visible,\n    #gsSwitchAccountBtn, #gsSwitchAccountBtn:focus, #gsSwitchAccountBtn:active, #gsSwitchAccountBtn:focus-visible,\n    #gsPersonalizationToggle, #gsPersonalizationToggle:focus, #gsPersonalizationToggle:active, #gsPersonalizationToggle:focus-visible,\n    #gsUseAnotherAccount, #gsUseAnotherAccount:focus, #gsUseAnotherAccount:active, #gsUseAnotherAccount:focus-visible,\n    .gs-theme-dot, .gs-theme-dot:focus, .gs-theme-dot:active, .gs-theme-dot:focus-visible{\n      outline: none !important;\n      box-shadow: none !important;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .gs-menu-item.gs-personalization-row *{\n      outline: none !important;\n      box-shadow: none !important;\n    }\n\n    body, .entry-content, .ms-app, .ms-main {\n      background: #ffffff !important;\n    }\n\n    @media (max-width: 768px){\n      .gs-user-menu{ width: 250px; }\n\n      .gs-menu-item.gs-personalization-row{ align-items: flex-start; }\n\n      .gs-theme-switcher{\n        margin-top: 2px;\n        transform: translateX(18px);\n        right: -4px;\n      }\n\n      .gs-theme-switcher.show{ display: flex; }\n\n      .gs-nav a,\n      .gs-nav a.active,\n      .gs-nav a.search-lab-link,\n      .gs-nav a.search-lab-link.active{\n        transition: color .12s ease, background-color .12s ease !important;\n        will-change: background-color, color;\n      }\n\n      .gs-nav a.active{\n        background: var(--ms-accent-soft) !important;\n        color: var(--ms-accent-text) !important;\n      }\n\n      .ms-side{\n        transform: translateZ(0);\n        backface-visibility: hidden;\n      }\n\n      .gs-nav a,\n      .gs-nav a:focus,\n      .gs-nav a:active,\n      .gs-nav a:focus-visible,\n      .gs-nav a:-webkit-any-link:focus-visible {\n        outline: none !important;\n        box-shadow: none !important;\n        border: none !important;\n      }\n\n      .gs-nav a::-moz-focus-inner { border: 0 !important; }\n      .gs-nav a { -webkit-tap-highlight-color: transparent !important; }\n\n      .gs-nav a,\n      .gs-nav a:focus,\n      .gs-nav a:active,\n      .gs-nav a:focus-visible {\n        outline: none !important;\n        box-shadow: none !important;\n        border: none !important;\n        transition: none !important;\n        animation: none !important;\n        -webkit-tap-highlight-color: transparent !important;\n      }\n\n      .gs-nav a.active,\n      .gs-nav a.search-lab-link.active {\n        background: transparent !important;\n        color: #3c4043 !important;\n      }\n\n      .gs-nav a:hover,\n      .gs-nav a.search-lab-link:hover {\n        background: var(--ms-accent-soft) !important;\n        color: var(--ms-accent-text) !important;\n      }\n\n      .ms-side {\n        width: 240px !important;\n        min-width: 240px !important;\n        flex-shrink: 0 !important;\n        transform: translateZ(0);\n        backface-visibility: hidden;\n      }\n    }\n\n    .ms-side {\n      height: calc(100vh - 125px) !important;\n      align-self: flex-start !important;\n    }\n\n    .gs-user { margin-top: auto !important; }\n										.gs-section-toggle{\n  width:100%;\n  border:0;\n  background:transparent;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  padding:12px 12px;\n  font-size:15px;\n  font-weight:700;\n  color:#202124;\n  cursor:pointer;\n  border-radius:10px;\n  box-sizing:border-box;\n}\n\n.gs-section-toggle:hover{\n  background:#f8f9fa;\n}\n\n.gs-section-arrow{\n  font-size:18px;\n  color:#7a7f85;\n}\n\n.gs-section-items{\n  display:none;\n  flex-direction:column;\n  gap:4px;\n}\n\n.gs-section-items.open{\n  display:flex;\n}\n\n.gs-subsection-toggle{\n  width:100%;\n  border:0;\n  background:transparent;\n\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n\n  height:56px;\n  padding:0 12px;\n\n  border-radius:10px;\n\n  font-size:18px;\n  font-weight:700;\n  line-height:1.1;\n\n  color:#3c4043;\n\n  cursor:pointer;\n  box-sizing:border-box;\n  font-family:inherit;\n}\n\n.gs-subsection-toggle:hover{\n  background:var(--ms-accent-soft);\n  color:var(--ms-accent-text);\n}\n\n.gs-subsection-items{\n  display:none;\n  flex-direction:column;\n  gap:4px;\n\n  margin-left:12px;\n\n  padding:2px 0 6px 0;\n}\n\n.gs-subsection-items.open{\n  display:flex;\n}\n\n.gs-subsection-items a{\n  display:flex;\n  align-items:center;\n\n  gap:10px;\n\n  height:52px;\n\n  padding:0 16px;\n\n  border-radius:16px;\n\n  font-size:16px;\n  font-weight:700;\n\n  line-height:1;\n\n  color:#3c4043;\n  text-decoration:none;\n\n  white-space:nowrap;\n}\n\n.gs-subsection-items a:hover{\n  background:var(--ms-accent-soft);\n  color:var(--ms-accent-text);\n}\n\n.gs-subsection-items a.active{\n  background:var(--ms-accent-soft);\n  color:var(--ms-accent-text);\n}\n\n.gs-subsection-toggle .gs-section-arrow{\n  font-size:18px;\n  color:#7a7f85;\n}\n	\n/* ===== RAPTOR API nested menu fix ===== */\n.gs-subsection-items .gs-subsection-toggle.nested{\n  width:100% !important;\n  height:36px !important;\n\npadding:0 14px 0 32px !important;  margin:2px 0 !important;\n\n  display:flex !important;\n  align-items:center !important;\n  justify-content:space-between !important;\n\n  border:0 !important;\n  border-radius:12px !important;\n\n  background:transparent !important;\n\n  font-family:inherit !important;\n\n  font-size:15px !important;\n  font-weight:700 !important;\n  line-height:1 !important;\n\n  color:#5f6368 !important;\n\n  letter-spacing:.2px;\n\n  cursor:pointer;\n}\n\n.gs-subsection-items .gs-subsection-toggle.nested > span:first-child{\n  display:flex !important;\n  align-items:center !important;\n  gap:10px !important;\n  font-size:20px !important;\n  font-weight:700 !important;\n  line-height:1 !important;\n}\n\n.gs-subsection-items .gs-subsection-toggle.nested .gs-section-arrow{\n  margin-left:auto !important;\n  font-size:18px !important;\n  color:#7a7f85 !important;\n}\n.gs-subsection-items .gs-subsection-toggle.nested:hover{\n  background:#f8fafc !important;\n  color:#111827 !important;\n}\n\n.gs-subsection-items .gs-subsection-toggle.nested span:first-child{\n  font-size:15px !important;\n  font-weight:700 !important;\n  line-height:1 !important;\n}\n\n.gs-subsection-items .gs-subsection-toggle.nested .gs-section-arrow{\n  font-size:18px !important;\n  color:#7a7f85 !important;\n  margin-right:-2px !important;\n}\n\n.gs-subsection-items.nested-items{\n  display:none;\n  flex-direction:column;\n  gap:4px;\n  margin-left:0 !important;\n  padding:0 0 6px 0 !important;\n  border-left:0 !important;\n}\n\n.gs-subsection-items.nested-items.open{\n  display:flex !important;\n}\n\n.gs-subsection-items.nested-items a{\n  height:36px !important;\n\n  padding:0 16px 0 42px !important;\n\n  font-size:14px !important;\n  font-weight:700 !important;\n\n  line-height:1 !important;\n\n  border-radius:12px !important;\n}\n										.gs-subsection-items.nested-items{\n  margin-left:8px !important;\n  padding-left:6px !important;\n\n  border-left:1px solid #e5e7eb;\n}\n										\n  </style>\n\n  <script>\n  document.addEventListener(\"DOMContentLoaded\", async function () {\ndocument.addEventListener(\"click\", function(e){\n  const btn = e.target.closest(\".gs-section-toggle, .gs-subsection-toggle\");\n  if (!btn) return;\n\n  e.preventDefault();\n  e.stopPropagation();\n\n  const target = document.getElementById(btn.dataset.target);\n  const arrow = btn.querySelector(\".gs-section-arrow\");\n\n  if (!target || !arrow) return;\n\n  target.classList.toggle(\"open\");\n  arrow.textContent = target.classList.contains(\"open\") ? \"⌄\" : \"›\";\n\n  if (document.activeElement) document.activeElement.blur();\n});\n    const avatarBtn = document.getElementById(\"gsAvatarBtn\");\n    const userMenu = document.getElementById(\"gsUserMenu\");\n\n    function closeThemeSwitcher() {\n      const themeSwitcher = document.getElementById(\"gsThemeSwitcher\");\n      if (themeSwitcher) themeSwitcher.classList.remove(\"show\");\n    }\n\n    if (avatarBtn && userMenu) {\n      avatarBtn.addEventListener(\"click\", function (e) {\n        e.stopPropagation();\n        userMenu.classList.toggle(\"show\");\n        closeSwitchPop();\n        closeThemeSwitcher();\n        if (document.activeElement) document.activeElement.blur();\n      });\n\n      document.addEventListener(\"click\", function (e) {\n        if (!e.target.closest(\".gs-user\")) {\n          userMenu.classList.remove(\"show\");\n          closeSwitchPop();\n          closeThemeSwitcher();\n        }\n      });\n\n      document.querySelectorAll(\".gs-nav a\").forEach(function(link){\n        link.addEventListener(\"mousedown\", function(e){ e.preventDefault(); });\n        link.addEventListener(\"click\", function(){ this.blur(); });\n      });\n    }\n\n    const SAVED_ACCOUNTS_KEY = \"ms_saved_accounts_v2\";\n    const DEVICE_KEY_STORAGE = \"ms_switch_device_key_v1\";\n    const THEME_STORAGE_KEY  = \"ms_color_scheme_v1\";\n\n    const MS_SWITCH = {\n      root: <?php echo wp_json_encode(rest_url()); ?>,\n      nonce: <?php echo wp_json_encode(wp_create_nonce(\'wp_rest\')); ?>,\n      homePage: <?php echo wp_json_encode($home_url); ?>,\n      loginUrl: <?php echo wp_json_encode($login_url); ?>,\n      logoutLoginTemplate: <?php echo wp_json_encode($logout_login_template); ?>,\n      logoutToLogin: <?php echo wp_json_encode($logout_to_login); ?>\n    };\n\n    function applyColorTheme(theme) {\n      const root = document.documentElement;\n      const map = {\n        blue:   { accent: \'#8fbef8\', soft: \'#eaf2ff\', text: \'#1967d2\' },\n        green:  { accent: \'#c9d86f\', soft: \'#f4f8df\', text: \'#6b8e23\' },\n        yellow: { accent: \'#efd66a\', soft: \'#fbf6df\', text: \'#b8860b\' },\n        orange: { accent: \'#efb07b\', soft: \'#fff0e5\', text: \'#d97706\' },\n        dark:   { accent: \'#6b7280\', soft: \'#f3f4f6\', text: \'#374151\' },\n        light:  { accent: \'#d9d9d9\', soft: \'#fafafa\', text: \'#7a7a7a\' }\n      };\n      const selected = map[theme] || map.blue;\n      root.style.setProperty(\'--ms-accent\', selected.accent);\n      root.style.setProperty(\'--ms-accent-soft\', selected.soft);\n      root.style.setProperty(\'--ms-accent-text\', selected.text);\n      document.querySelectorAll(\'.gs-theme-dot\').forEach(function(dot){\n        dot.classList.toggle(\'active\', dot.dataset.theme === theme);\n        dot.blur();\n      });\n      try { localStorage.setItem(THEME_STORAGE_KEY, theme); } catch (e) {}\n    }\n\n    function initColorTheme() {\n      let saved = \'blue\';\n      try { saved = localStorage.getItem(THEME_STORAGE_KEY) || \'blue\'; } catch (e) {}\n      applyColorTheme(saved);\n      document.querySelectorAll(\'.gs-theme-dot\').forEach(function(dot){\n        dot.addEventListener(\'click\', function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          applyColorTheme(dot.dataset.theme || \'blue\');\n        });\n      });\n    }\n\n    initColorTheme();\n\n    const personalizationRow = document.getElementById(\"gsPersonalizationRow\");\n    const personalizationToggle = document.getElementById(\"gsPersonalizationToggle\");\n    const themeSwitcher = document.getElementById(\"gsThemeSwitcher\");\n\n    if (personalizationRow && themeSwitcher) {\n      function toggleThemeSwitcher(e) {\n        e.preventDefault();\n        e.stopPropagation();\n        const willOpen = !themeSwitcher.classList.contains(\"show\");\n        closeSwitchPop();\n        if (willOpen) { themeSwitcher.classList.add(\"show\"); }\n        else { themeSwitcher.classList.remove(\"show\"); }\n        if (document.activeElement) document.activeElement.blur();\n      }\n\n      personalizationRow.addEventListener(\"click\", function(e){\n        if (e.target.closest(\".gs-theme-switcher\")) return;\n        toggleThemeSwitcher(e);\n      });\n\n      if (personalizationToggle) {\n        personalizationToggle.addEventListener(\"click\", function(e){ toggleThemeSwitcher(e); });\n      }\n\n      themeSwitcher.addEventListener(\"click\", function(e){ e.stopPropagation(); });\n\n      document.addEventListener(\"click\", function(e){\n        if (!e.target.closest(\".gs-personalization-row\")) {\n          themeSwitcher.classList.remove(\"show\");\n        }\n      });\n    }\n\n    function getDeviceKey() {\n      let key = localStorage.getItem(DEVICE_KEY_STORAGE);\n      if (key) return key;\n      if (window.crypto && crypto.randomUUID) { key = crypto.randomUUID(); }\n      else { key = \'dev-\' + Math.random().toString(36).slice(2) + Date.now().toString(36); }\n      localStorage.setItem(DEVICE_KEY_STORAGE, key);\n      return key;\n    }\n\n    function getSavedAccounts() {\n      try {\n        const data = JSON.parse(localStorage.getItem(SAVED_ACCOUNTS_KEY) || \"[]\");\n        return Array.isArray(data) ? data : [];\n      } catch (e) { return []; }\n    }\n\n    function saveAccounts(items) { localStorage.setItem(SAVED_ACCOUNTS_KEY, JSON.stringify(items)); }\n\n    function saveAccount(account) {\n      if (!account || !account.user_login) return;\n      let items = getSavedAccounts();\n      items = items.filter(it => it.user_login !== account.user_login);\n      items.unshift(account);\n      if (items.length > 6) items = items.slice(0, 6);\n      saveAccounts(items);\n    }\n\n    function getCurrentLogin() {\n      const app = document.querySelector(\".ms-app\");\n      return app ? (app.dataset.currentLogin || \"guest\") : \"guest\";\n    }\n\n    function getAccountByLogin(login) {\n      return getSavedAccounts().find(it => it.user_login === login) || null;\n    }\n\n    function canQuickSwitch(account) {\n      if (!account || !account.switch_token || !account.quick_until) return false;\n      const now = Math.floor(Date.now() / 1000);\n      return Number(account.quick_until) > now;\n    }\n\n    function renderSwitchAccounts() {\n      const list = document.getElementById(\"gsSwitchAccountList\");\n      if (!list) return;\n      const currentLogin = getCurrentLogin();\n      const items = getSavedAccounts().filter(it => it.user_login !== currentLogin);\n      if (!items.length) {\n        list.innerHTML = \'<div class=\"gs-switch-empty\">No other saved accounts on this browser yet.</div>\';\n        return;\n      }\n      list.innerHTML = items.map(it => `\n        <div class=\"gs-switch-item\" data-login=\"${encodeURIComponent(it.user_login)}\">\n          <img src=\"${it.avatar || \'\'}\" alt=\"\">\n          <div class=\"gs-switch-meta\">\n            <div class=\"gs-switch-name\">${it.display_name || it.user_login}</div>\n            <div class=\"gs-switch-login\">@${it.user_login}</div>\n            ${canQuickSwitch(it) ? \'<div class=\"gs-switch-badge\">Fast switch available</div>\' : \'\'}\n          </div>\n        </div>\n      `).join(\'\');\n    }\n\n    function openSwitchPop() {\n      closeThemeSwitcher();\n      renderSwitchAccounts();\n      document.getElementById(\"gsSwitchPop\")?.classList.add(\"show\");\n    }\n\n    function closeSwitchPop() {\n      document.getElementById(\"gsSwitchPop\")?.classList.remove(\"show\");\n    }\n\n    function fallbackToLogin(login) {\n      const target = MS_SWITCH.logoutLoginTemplate.replace(\'__LOGIN__\', encodeURIComponent(login));\n      window.location.href = target;\n    }\n\n    async function attemptQuickSwitch(login) {\n      const account = getAccountByLogin(login);\n      if (!account || !canQuickSwitch(account)) { fallbackToLogin(login); return; }\n      try {\n        const res = await fetch(MS_SWITCH.root + \'momentry/v1/account-switch\', {\n          method: \'POST\',\n          headers: { \'Content-Type\': \'application/json\', \'X-WP-Nonce\': MS_SWITCH.nonce },\n          body: JSON.stringify({ login, device_key: getDeviceKey(), switch_token: account.switch_token })\n        });\n        const json = await res.json();\n        if (json && json.ok) {\n          try {\n            sessionStorage.removeItem(\"ms_current_thread_id\");\n            sessionStorage.removeItem(\"ms_history_cache\");\n            localStorage.removeItem(\"ms_last_thread_id\");\n          } catch (e) {}\n          window.currentThreadId = null;\n          const chatBox = document.getElementById(\"chatMessages\");\n          if (chatBox) chatBox.innerHTML = \"\";\n          window.location.href = (json.data && json.data.redirect) ? json.data.redirect : MS_SWITCH.homePage;\n          return;\n        }\n        fallbackToLogin(login);\n      } catch (err) {\n        console.error(\'Quick switch failed:\', err);\n        fallbackToLogin(login);\n      }\n    }\n\n    async function registerCurrentAccount(details) {\n      try {\n        const res = await fetch(MS_SWITCH.root + \'momentry/v1/register-switch-device\', {\n          method: \'POST\',\n          headers: { \'Content-Type\': \'application/json\', \'X-WP-Nonce\': MS_SWITCH.nonce },\n          body: JSON.stringify({ device_key: getDeviceKey() })\n        });\n        const json = await res.json();\n        if (!json || !json.ok || !json.data) return;\n        saveAccount({\n          user_id: details.user_id,\n          user_login: details.user_login,\n          display_name: details.display_name,\n          avatar: details.avatar,\n          switch_token: json.data.token,\n          quick_until: json.data.expires\n        });\n        renderSwitchAccounts();\n      } catch (err) {\n        console.error(\'Register switch device failed:\', err);\n      }\n    }\n\n    <?php if (is_user_logged_in()) :\n      $u = wp_get_current_user();\n      $avatar = get_avatar_url($u->ID, [\'size\' => 96]);\n    ?>\n    saveAccount({\n      user_id: <?php echo (int) $u->ID; ?>,\n      user_login: <?php echo wp_json_encode($u->user_login); ?>,\n      display_name: <?php echo wp_json_encode($u->display_name); ?>,\n      avatar: <?php echo wp_json_encode($avatar); ?>\n    });\n    registerCurrentAccount({\n      user_id: <?php echo (int) $u->ID; ?>,\n      user_login: <?php echo wp_json_encode($u->user_login); ?>,\n      display_name: <?php echo wp_json_encode($u->display_name); ?>,\n      avatar: <?php echo wp_json_encode($avatar); ?>\n    });\n    <?php endif; ?>\n\n    const switchBtn = document.getElementById(\"gsSwitchAccountBtn\");\n    const switchPop = document.getElementById(\"gsSwitchPop\");\n    const switchUseAnother = document.getElementById(\"gsUseAnotherAccount\");\n\n    if (switchBtn) {\n      switchBtn.addEventListener(\"click\", function (e) {\n        e.preventDefault();\n        e.stopPropagation();\n        openSwitchPop();\n        closeThemeSwitcher();\n        this.blur();\n      });\n    }\n\n    switchPop?.addEventListener(\"click\", function (e) { e.stopPropagation(); });\n\n    document.getElementById(\"gsSwitchAccountList\")?.addEventListener(\"click\", async function (e) {\n      const item = e.target.closest(\".gs-switch-item\");\n      if (!item) return;\n      const login = decodeURIComponent(item.dataset.login || \"\");\n      if (!login) return;\n      closeSwitchPop();\n      await attemptQuickSwitch(login);\n    });\n\n    switchUseAnother?.addEventListener(\"click\", function (e) {\n      e.preventDefault();\n      closeSwitchPop();\n      this.blur();\n      window.location.href = MS_SWITCH.logoutToLogin;\n    });\n\n    function getHistoryStorageKey() { return \"ms_search_history_v1_\" + getCurrentLogin(); }\n    function getLegacyHistoryStorageKey() { return \"ms_search_history_v1\"; }\n    function getHistoryMigratedFlagKey() { return \"ms_search_history_migrated_v1_\" + getCurrentLogin(); }\n\n    function normalizeHistoryItems(items) {\n      if (!Array.isArray(items)) return [];\n      return items.sort((a, b) => {\n        if (!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1;\n        return new Date(b.updatedAt || 0) - new Date(a.updatedAt || 0);\n      });\n    }\n\n    function getHistory() {\n      try {\n        const currentKey  = getHistoryStorageKey();\n        const legacyKey   = getLegacyHistoryStorageKey();\n        const migratedKey = getHistoryMigratedFlagKey();\n        let raw = JSON.parse(localStorage.getItem(currentKey) || \"null\");\n        if (Array.isArray(raw)) return normalizeHistoryItems(raw);\n        const alreadyMigrated = localStorage.getItem(migratedKey) === \"1\";\n        if (alreadyMigrated) {\n          localStorage.setItem(currentKey, JSON.stringify([]));\n          return [];\n        }\n        const legacyRaw = JSON.parse(localStorage.getItem(legacyKey) || \"[]\");\n        if (Array.isArray(legacyRaw) && legacyRaw.length) {\n          const normalized = normalizeHistoryItems(legacyRaw).slice(0, 12);\n          localStorage.setItem(currentKey, JSON.stringify(normalized));\n          localStorage.setItem(migratedKey, \"1\");\n          localStorage.removeItem(legacyKey);\n          return normalized;\n        }\n        localStorage.setItem(currentKey, JSON.stringify([]));\n        localStorage.setItem(migratedKey, \"1\");\n        return [];\n      } catch (err) {\n        console.error(\"Read history failed:\", err);\n        return [];\n      }\n    }\n\n    function saveHistory(items) {\n      try {\n        const currentKey  = getHistoryStorageKey();\n        const legacyKey   = getLegacyHistoryStorageKey();\n        const migratedKey = getHistoryMigratedFlagKey();\n        items = normalizeHistoryItems(items).slice(0, 12);\n        localStorage.setItem(currentKey, JSON.stringify(items));\n        localStorage.setItem(migratedKey, \"1\");\n        localStorage.removeItem(legacyKey);\n      } catch (err) {\n        console.error(\"Save history failed:\", err);\n      }\n    }\n\n    function renderHistory(items) {\n      const list = document.getElementById(\"msHistoryList\");\n      if (!list) return;\n      if (!items.length) {\n        list.innerHTML = \'<div style=\"font-size:12px;color:#999;padding:6px 12px;\">No history yet</div>\';\n        return;\n      }\n      list.innerHTML = items.map(it => `\n        <div class=\"ms-history-item ${it.pinned ? \'is-pinned\' : \'\'}\" data-id=\"${it.id}\">\n          <span class=\"ms-history-title\">\n            ${it.pinned ? \'<span style=\"margin-right:6px;\">📌</span>\' : \'\'}\n            ${it.title || it.query || \"Untitled\"}\n          </span>\n          <span class=\"ms-history-menu\">⋯</span>\n        </div>\n      `).join(\"\");\n    }\n\n    function refreshHistory() { renderHistory(getHistory()); }\n\n    function setHistoryActiveOnly(id) {\n      document.querySelectorAll(\".ms-history-item\").forEach(function(i){\n        i.classList.toggle(\"active\", String(i.dataset.id) === String(id));\n      });\n    }\n\n    function saveRecordToSession(record) {\n      try {\n        sessionStorage.setItem(\"ms_chat_html\", record.chatHtml || \"\");\n        sessionStorage.setItem(\"ms_last_query\", record.query || \"\");\n        sessionStorage.setItem(\"ms_selected_history_id\", String(record.id));\n      } catch (err) {}\n    }\n\n    function runMainScripts(container) {\n      const scripts = container.querySelectorAll(\"script\");\n      scripts.forEach(function(oldScript){\n        const newScript = document.createElement(\"script\");\n        Array.from(oldScript.attributes).forEach(function(attr){\n          newScript.setAttribute(attr.name, attr.value);\n        });\n        newScript.textContent = oldScript.textContent;\n        oldScript.parentNode.replaceChild(newScript, oldScript);\n      });\n    }\n\n    async function loadHistoryIntoMainOnly(record) {\n      const main = document.querySelector(\".ms-main\");\n      if (!main) { window.location.href = \"/search-chat/?restore=1\"; return; }\n\n      function callRightRestore() {\n        if (typeof window.MS_RESTORE_HISTORY_FROM_SIDEBAR === \"function\") {\n          window.MS_RESTORE_HISTORY_FROM_SIDEBAR({\n            id: record.id,\n            query: record.query || \"\",\n            title: record.title || \"\",\n            chatHtml: record.chatHtml || \"\",\n            cardsData: Array.isArray(record.cardsData) ? record.cardsData : []\n          });\n          return true;\n        }\n        return false;\n      }\n\n      try {\n        main.style.opacity = \"0.55\";\n        if (document.getElementById(\"msChat\") && callRightRestore()) {\n          history.pushState({ msHistoryRestore: true }, \"\", \"/search-chat/?restore=1\");\n          setTimeout(function(){ main.style.opacity = \"1\"; }, 120);\n          return;\n        }\n        const res = await fetch(\"/search-chat/?restore=1\", {\n          method: \"GET\",\n          credentials: \"same-origin\",\n          headers: { \"X-Requested-With\": \"XMLHttpRequest\" }\n        });\n        if (!res.ok) throw new Error(\"History restore page load failed\");\n        const html = await res.text();\n        const doc = new DOMParser().parseFromString(html, \"text/html\");\n        const newMain = doc.querySelector(\".ms-main\");\n        if (!newMain) { window.location.href = \"/search-chat/?restore=1\"; return; }\n        main.innerHTML = newMain.innerHTML;\n        runMainScripts(main);\n        history.pushState({ msHistoryRestore: true }, \"\", \"/search-chat/?restore=1\");\n        let tries = 0;\n        const timer = setInterval(function(){\n          tries++;\n          if (callRightRestore() || tries >= 20) {\n            clearInterval(timer);\n            if (tries >= 20) console.warn(\"MS_RESTORE_HISTORY_FROM_SIDEBAR not ready\");\n            main.style.opacity = \"1\";\n          }\n        }, 100);\n      } catch (err) {\n        console.error(\"History restore failed:\", err);\n        window.location.href = \"/search-chat/?restore=1\";\n      }\n    }\n\n    document.addEventListener(\"click\", function (e) {\n      const menuBtn = e.target.closest(\".ms-history-menu\");\n      if (menuBtn) {\n        e.stopPropagation();\n        const item = menuBtn.closest(\".ms-history-item\");\n        if (!item) return;\n        const id = item.dataset.id;\n        const rect = menuBtn.getBoundingClientRect();\n        createHistoryMenu(rect.left - 140, rect.bottom + 6, id);\n        return;\n      }\n      const item = e.target.closest(\".ms-history-item\");\n      if (!item) return;\n      e.preventDefault();\n      e.stopPropagation();\n      const id = item.dataset.id;\n      const items = getHistory();\n      const record = items.find(x => String(x.id) === String(id));\n      if (!record) return;\n      setHistoryActiveOnly(id);\n      saveRecordToSession(record);\n      loadHistoryIntoMainOnly(record);\n    });\n\n    function createHistoryMenu(x, y, id) {\n      const old = document.getElementById(\"msHistoryDropdown\");\n      if (old) old.remove();\n      const items = getHistory();\n      const current = items.find(x => String(x.id) === String(id));\n      const isPinned = current ? !!current.pinned : false;\n      const menu = document.createElement(\"div\");\n      menu.id = \"msHistoryDropdown\";\n      menu.style.cssText = \"position:fixed;top:\" + y + \"px;left:\" + x + \"px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:8px 0;width:180px;z-index:9999;font-size:14px;border:none;outline:none;\";\n      menu.innerHTML = `\n        <div class=\"ms-menu-item\" data-action=\"pin\">${isPinned ? \"📌 Unpin\" : \"📌 Pin\"}</div>\n        <div class=\"ms-menu-item\" data-action=\"rename\">✏️ Rename</div>\n        <div class=\"ms-menu-item\" data-action=\"delete\">🗑 Delete</div>\n      `;\n      document.body.appendChild(menu);\n      setTimeout(() => {\n        document.addEventListener(\"click\", () => menu.remove(), { once: true });\n      }, 10);\n      menu.addEventListener(\"click\", function (e) {\n        const action = e.target.dataset.action;\n        if (!action) return;\n        let items = getHistory();\n        const idx = items.findIndex(x => String(x.id) === String(id));\n        if (idx === -1) { menu.remove(); return; }\n        if (action === \"delete\") {\n          const deletingId = String(items[idx].id);\n          items.splice(idx, 1);\n          saveHistory(items);\n          refreshHistory();\n          try {\n            const selectedId = sessionStorage.getItem(\"ms_selected_history_id\") || \"\";\n            if (selectedId && deletingId && selectedId === deletingId) {\n              sessionStorage.removeItem(\"ms_chat_html\");\n              sessionStorage.removeItem(\"ms_last_query\");\n              sessionStorage.removeItem(\"ms_selected_history_id\");\n              window.dispatchEvent(new CustomEvent(\"ms-history-cleared\", { detail: { deletedId: deletingId } }));\n            }\n          } catch (err) {}\n          window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n        }\n        if (action === \"rename\") {\n          const oldTitle = items[idx].title || items[idx].query || \"\";\n          const newTitle = prompt(\"Rename this chat:\", oldTitle);\n          if (newTitle && newTitle.trim()) {\n            items[idx].title = newTitle.trim();\n            items[idx].updatedAt = new Date().toISOString();\n            saveHistory(items);\n            refreshHistory();\n            window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n          }\n        }\n        if (action === \"pin\") {\n          items[idx].pinned = !items[idx].pinned;\n          items[idx].updatedAt = new Date().toISOString();\n          items = normalizeHistoryItems(items);\n          saveHistory(items);\n          refreshHistory();\n          window.dispatchEvent(new CustomEvent(\"ms-history-updated\"));\n        }\n        menu.remove();\n      });\n    }\n\n    document.getElementById(\"msNewChat\")?.addEventListener(\"click\", function () {\n      try {\n        sessionStorage.removeItem(\"ms_chat_html\");\n        sessionStorage.removeItem(\"ms_last_query\");\n        sessionStorage.removeItem(\"ms_selected_history_id\");\n      } catch (err) {}\n      document.querySelectorAll(\".ms-history-item\").forEach(i => i.classList.remove(\"active\"));\n      window.location.href = \"/search-chat/\";\n    });\n\n    window.addEventListener(\"ms-history-updated\", function () { refreshHistory(); });\n\n    window.addEventListener(\"storage\", function (e) {\n      if (e.key === getHistoryStorageKey()) { refreshHistory(); }\n      if (e.key === THEME_STORAGE_KEY) {\n        try { applyColorTheme(localStorage.getItem(THEME_STORAGE_KEY) || \'blue\'); } catch (err) {}\n      }\n    });\n\n    refreshHistory();\n\n    /* =========================================================\n       Sidebar AJAX Navigation\n    ========================================================= */\n    (function initSidebarAjaxNavigation(){\n\n      const main = document.querySelector(\".ms-main\");\n      const navLinks = document.querySelectorAll(\".gs-nav a\");\n\n      if (!main || !navLinks.length) return;\n\n      function setActiveByUrl(url) {\n        const path = new URL(url, window.location.origin).pathname;\n        navLinks.forEach(function(link){\n          const linkPath = new URL(link.href, window.location.origin).pathname;\n          link.classList.toggle(\"active\", linkPath === path);\n        });\n      }\n\n      function runScripts(container) {\n        const scripts = container.querySelectorAll(\"script\");\n        scripts.forEach(function(oldScript){\n          const newScript = document.createElement(\"script\");\n          Array.from(oldScript.attributes).forEach(function(attr){\n            newScript.setAttribute(attr.name, attr.value);\n          });\n          newScript.textContent = oldScript.textContent;\n          oldScript.parentNode.replaceChild(newScript, oldScript);\n        });\n      }\n\n      /* ✅ Collection 頁 footer assets */\n      function runPeopleFilesFooterAssets(doc) {\n        if (!doc) return;\n        const styles = Array.from(doc.querySelectorAll(\"style\"));\n        styles.forEach(function(oldStyle, index){\n          const css = oldStyle.textContent || \"\";\n          const isPeopleFilesStyle =\n            css.includes(\"#ms-files-page\") ||\n            css.includes(\"mp-filter-pop\") ||\n            css.includes(\"mp-range-input\") ||\n            css.includes(\"ltRegisterLogPanel\") ||\n            css.includes(\"ltRegisterLogLauncher\");\n          if (!isPeopleFilesStyle) return;\n          const styleId = oldStyle.id || (\"lt-people-files-ajax-style-\" + index);\n          const existed = document.getElementById(styleId);\n          if (existed) existed.remove();\n          const newStyle = document.createElement(\"style\");\n          newStyle.id = styleId;\n          newStyle.textContent = css;\n          document.head.appendChild(newStyle);\n        });\n        const scripts = Array.from(doc.querySelectorAll(\"script\"));\n        scripts.forEach(function(oldScript){\n          const code = oldScript.textContent || \"\";\n          const isPeopleFilesScript =\n            code.includes(\"initPeopleFilesMediaLoader\") ||\n            code.includes(\"bootFilterOnly\") ||\n            code.includes(\"replaceFilterPanel\") ||\n            code.includes(\"FILTER_PANEL_HTML\") ||\n            code.includes(\"initRecentRegisterLog\") ||\n            code.includes(\"waitForFilesPage\") ||\n            code.includes(\"ltRegisterLogPanel\") ||\n            code.includes(\"LT People Files\");\n          if (!isPeopleFilesScript) return;\n          const newScript = document.createElement(\"script\");\n          Array.from(oldScript.attributes).forEach(function(attr){\n            newScript.setAttribute(attr.name, attr.value);\n          });\n          newScript.textContent = code;\n          document.body.appendChild(newScript);\n        });\n      }\n\n      /* ✅ People 頁 footer assets（新增）*/\n      function runPeoplePeopleFooterAssets(doc) {\n        if (!doc) return;\n        const scripts = Array.from(doc.querySelectorAll(\"script\"));\n\n        function injectPeopleScripts() {\n          scripts.forEach(function(oldScript){\n            const code = oldScript.textContent || \"\";\n            const isPeopleScript =\n  code.includes(\"msPplViewList\") ||\n  code.includes(\"msPplViewDetail\") ||\n  code.includes(\"MOCK_PEOPLE\") ||\n  code.includes(\"MS_IDENTITIES_PAGE1\");\n            if (!isPeopleScript) return;\n            const newScript = document.createElement(\"script\");\n            Array.from(oldScript.attributes).forEach(function(attr){\n              newScript.setAttribute(attr.name, attr.value);\n            });\n            newScript.textContent = code;\n            document.body.appendChild(newScript);\n          });\n        }\n\n        /* 等 #msPplUnassignedGrid 出現在 DOM 後才執行 */\n        let tries = 0;\n        const timer = setInterval(function(){\n          tries++;\n          if (document.getElementById(\"msPplUnassignedGrid\") || tries >= 30) {\n            clearInterval(timer);\n            injectPeopleScripts();\n          }\n        }, 50);\n      }\n\nasync function loadPage(url, pushState = true) {\n          // 離開前檢查 dirty state\n          if (typeof window.MS_PPL_IS_DIRTY === \'function\' && window.MS_PPL_IS_DIRTY()) {\n  if (typeof window.MS_PPL_SHOW_DIRTY_LEAVE === \'function\') {\n    window.MS_PPL_SHOW_DIRTY_LEAVE(function() { loadPage(url, pushState); });\n    return;\n  }\n}\n        try {\n          main.style.opacity = \"0.55\";\n          const res = await fetch(url, {\n            method: \"GET\",\n            credentials: \"same-origin\",\n            headers: { \"X-Requested-With\": \"XMLHttpRequest\" }\n          });\n          if (!res.ok) throw new Error(\"Page load failed\");\n          const html = await res.text();\n          const doc = new DOMParser().parseFromString(html, \"text/html\");\n          const newMain = doc.querySelector(\".ms-main\");\n          if (!newMain) { window.location.href = url; return; }\n          main.innerHTML = newMain.innerHTML;\n          runScripts(main);\n\n          /* ✅ Collection 頁 */\n          if (url.includes(\"/library/\")) {\n            runPeopleFilesFooterAssets(doc);\n          }\n\n          /* ✅ People 頁 */\n          if (url.includes(\"/people/\")) {\n            runPeoplePeopleFooterAssets(doc);\n          }\n\n          if (pushState) { history.pushState({ msAjaxPage: url }, \"\", url); }\n          setActiveByUrl(url);\n          setTimeout(function(){ main.style.opacity = \"1\"; }, 80);\n\n        } catch (err) {\n          console.error(\"AJAX page load failed:\", err);\n          window.location.href = url;\n        }\n      }\n\n      navLinks.forEach(function(link){\n        link.addEventListener(\"click\", function(e){\n          const url = link.href;\n          if (!url) return;\n          e.preventDefault();\n          e.stopPropagation();\n          if (document.activeElement) document.activeElement.blur();\n          loadPage(url, true);\n        });\n      });\n\n      window.addEventListener(\"popstate\", function(){\n        loadPage(window.location.href, false);\n      });\n\n      setActiveByUrl(window.location.href);\n\n    })();\n  });\n  </script>\n\n  <div class=\"ms-app\" <?php if (is_user_logged_in()) : $u = wp_get_current_user(); ?>data-current-login=\"<?php echo esc_attr($u->user_login); ?>\"<?php else: ?>data-current-login=\"guest\"<?php endif; ?>>\n\n    <aside class=\"ms-side\">\n\n      <div class=\"gs-logo\">Workspace</div>\n\n      <div class=\"gs-nav\">\n\n<a href=\"/lt-searching/\" class=\"<?php echo is_page(\'lt-searching\') ? \'active\' : \'\'; ?>\">\n  <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n    home_url(\'/?ms_local_image=\' .\n    rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Search.png\'))\n  ); ?>\" alt=\"\">\n  <span>Search</span>\n</a>\n	  \n<a href=\"/library/\" class=\"<?php echo is_page([\'library\']) ? \'active\' : \'\'; ?>\">\n  <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n    home_url(\'/?ms_local_image=\' .\n    rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Library.png\'))\n  ); ?>\" alt=\"\">\n  <span>Library</span>\n</a>\n\n<a href=\"/people/\" class=\"<?php echo is_page([\'people\']) ? \'active\' : \'\'; ?>\">\n  <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n    home_url(\'/?ms_local_image=\' .\n    rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/People.png\'))\n  ); ?>\" alt=\"\">\n  <span>People</span>\n</a>\n\n  <div class=\"gs-divider\"></div>\n\n<button class=\"gs-section-toggle\" data-target=\"opsMenu\" type=\"button\">\n  <span>Operations</span>\n  <span class=\"gs-section-arrow\">›</span>\n</button>\n\n<div class=\"gs-section-items\" id=\"opsMenu\">\n\n<a href=\"/progress/\" class=\"<?php echo is_page(\'progress\') ? \'active\' : \'\'; ?>\">\n  <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n    home_url(\'/?ms_local_image=\' .\n    rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Progress.png\'))\n  ); ?>\" alt=\"\">\n  <span>Progress</span>\n</a>\n\n<button class=\"gs-subsection-toggle\" data-target=\"consoleMenu\" type=\"button\">\n  <span>\n    <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n      home_url(\'/?ms_local_image=\' .\n      rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Console.png\'))\n    ); ?>\" alt=\"\">\n    Console\n  </span>\n  <span class=\"gs-section-arrow\">⌄</span>\n</button>\n\n  <div class=\"gs-subsection-items open\" id=\"consoleMenu\">\n\n    <button class=\"gs-subsection-toggle nested\" data-target=\"momentryMenu\" type=\"button\">\n      <span>Momentry</span>\n      <span class=\"gs-section-arrow\">⌄</span>\n    </button>\n\n    <div class=\"gs-subsection-items nested-items open\" id=\"momentryMenu\">\n      <a href=\"/momentry-api-console/\" class=\"<?php echo is_page(\'momentry-api-console\') ? \'active\' : \'\'; ?>\">\n        API\n      </a>\n    </div>\n\n    <button class=\"gs-subsection-toggle nested\" data-target=\"raptorMenu\" type=\"button\">\n      <span>RAPTOR</span>\n      <span class=\"gs-section-arrow\">⌄</span>\n    </button>\n\n    <div class=\"gs-subsection-items nested-items open\" id=\"raptorMenu\">\n      <a href=\"/raptor-api-console/\" class=\"<?php echo is_page(\'raptor-api-console\') ? \'active\' : \'\'; ?>\">\n        API\n      </a>\n\n      <a href=\"/demo/\" class=\"<?php echo is_page(\'demo\') ? \'active\' : \'\'; ?>\">\n        🎬 Demo\n      </a>\n    </div>\n\n  </div>\n\n  <a href=\"/logs/\" class=\"<?php echo is_page(\'logs\') ? \'active\' : \'\'; ?>\">\n  <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n    home_url(\'/?ms_local_image=\' .\n    rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Logs.png\'))\n  ); ?>\" alt=\"\">\n  <span>Logs</span>\n</a>\n\n</div>\n  <div class=\"gs-divider\"></div>\n\n  <button class=\"gs-section-toggle\" data-target=\"analyticsMenu\" type=\"button\">\n    <span>Analytics</span>\n    <span class=\"gs-section-arrow\">›</span>\n  </button>\n\n<div class=\"gs-section-items\" id=\"analyticsMenu\">\n\n  <a href=\"/metrics/\" class=\"<?php echo is_page(\'metrics\') ? \'active\' : \'\'; ?>\">\n    <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n      home_url(\'/?ms_local_image=\' .\n      rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Metrics.png\'))\n    ); ?>\" alt=\"\">\n    <span>Metrics</span>\n  </a>\n\n  <a href=\"/benchmark/\" class=\"<?php echo is_page(\'benchmark\') ? \'active\' : \'\'; ?>\">\n    <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n      home_url(\'/?ms_local_image=\' .\n      rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Benchmark.png\'))\n    ); ?>\" alt=\"\">\n    <span>Benchmark</span>\n  </a>\n\n  <a href=\"/evaluation/\" class=\"<?php echo is_page(\'evaluation\') ? \'active\' : \'\'; ?>\">\n    <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n      home_url(\'/?ms_local_image=\' .\n      rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Evaluation.png\'))\n    ); ?>\" alt=\"\">\n    <span>Evaluation</span>\n  </a>\n\n  <a href=\"/search-quality/\" class=\"<?php echo is_page(\'search-quality\') ? \'active\' : \'\'; ?>\">\n    <img class=\"gs-nav-icon\" src=\"<?php echo esc_url(\n      home_url(\'/?ms_local_image=\' .\n      rawurlencode(\'/Users/accusys/momentry/var/sftpgo/data/demo/Search quality.png\'))\n    ); ?>\" alt=\"\">\n    <span>Search Quality</span>\n  </a>\n\n</div>\n\n</div>\n\n      <div class=\"gs-divider\"></div>\n\n      <div class=\"ms-history-head\">\n        <span>Search History</span>\n        <span id=\"msNewChat\">＋ New</span>\n      </div>\n\n      <div class=\"ms-history-wrap\">\n        <div id=\"msHistoryList\" style=\"display:flex;flex-direction:column;gap:4px;\"></div>\n      </div>\n\n      <?php if (is_user_logged_in()) :\n        $u = wp_get_current_user();\n        $avatar = get_avatar_url($u->ID, [\'size\' => 96]); ?>\n\n        <div class=\"gs-user\" id=\"gsAvatarBtn\">\n          <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar\" alt=\"avatar\" />\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\"><?php echo esc_html($u->display_name); ?></div>\n            <div class=\"gs-user-plan\">\n              <?php\n                if (in_array(\'administrator\', $u->roles)) echo \'Admin\';\n                elseif (in_array(\'editor\', $u->roles)) echo \'Editor\';\n                elseif (in_array(\'subscriber\', $u->roles)) echo \'Member\';\n                else echo \'User\';\n              ?>\n            </div>\n          </div>\n\n          <div class=\"gs-user-menu\" id=\"gsUserMenu\">\n            <div class=\"gs-user-card\">\n              <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar-lg\" alt=\"avatar large\" />\n              <div>\n                <div class=\"gs-user-card-name\"><?php echo esc_html($u->display_name); ?></div>\n                <div class=\"gs-user-handle\">@<?php echo esc_html($u->user_login); ?></div>\n              </div>\n            </div>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"/upgrade-plan/\" class=\"gs-menu-item\">⭐ Upgrade plan</a>\n\n            <div class=\"gs-menu-item gs-personalization-row\" id=\"gsPersonalizationRow\">\n              <a href=\"#\" class=\"gs-personalization-link\" id=\"gsPersonalizationToggle\">\n                <span>🎨</span>\n                <span>Personalization</span>\n              </a>\n              <div class=\"gs-theme-switcher\" id=\"gsThemeSwitcher\" aria-label=\"Color theme\">\n                <button class=\"gs-theme-dot\" data-theme=\"blue\" title=\"Blue\" type=\"button\"></button>\n                <button class=\"gs-theme-dot\" data-theme=\"green\" title=\"Green\" type=\"button\"></button>\n                <button class=\"gs-theme-dot\" data-theme=\"yellow\" title=\"Yellow\" type=\"button\"></button>\n                <button class=\"gs-theme-dot\" data-theme=\"orange\" title=\"Orange\" type=\"button\"></button>\n                <button class=\"gs-theme-dot\" data-theme=\"dark\" title=\"Dark\" type=\"button\"></button>\n                <button class=\"gs-theme-dot\" data-theme=\"light\" title=\"Light\" type=\"button\"></button>\n              </div>\n            </div>\n\n            <a href=\"/settings/\" class=\"gs-menu-item\">⚙ Settings</a>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"/help/\" class=\"gs-menu-item\">❓ Help</a>\n\n            <div class=\"gs-switch-wrap\">\n              <a href=\"#\" class=\"gs-menu-item\" id=\"gsSwitchAccountBtn\">🔄 Switch account</a>\n              <div class=\"gs-switch-pop\" id=\"gsSwitchPop\">\n                <div class=\"gs-switch-pop-head\">Switch account</div>\n                <div class=\"gs-switch-pop-sub\">Choose an account previously used on this browser.</div>\n                <div class=\"gs-switch-pop-list\" id=\"gsSwitchAccountList\"></div>\n                <div class=\"gs-switch-pop-divider\"></div>\n                <div class=\"gs-switch-note\">Accounts used in the last 24 hours can switch instantly.</div>\n                <a href=\"#\" class=\"gs-switch-pop-action\" id=\"gsUseAnotherAccount\">+ Use another account</a>\n              </div>\n            </div>\n\n            <a href=\"<?php echo esc_url(wp_logout_url(home_url(\'/lt-searching/\'))); ?>\" class=\"gs-menu-item logout\">🚪 Log out</a>\n          </div>\n        </div>\n\n      <?php else : ?>\n\n        <a href=\"<?php echo esc_url(wp_login_url(home_url(\'/lt-searching/\'))); ?>\" class=\"gs-user\">\n          <div class=\"gs-avatar\">👤</div>\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\">Sign in to Momentry</div>\n            <div class=\"gs-user-plan\">Access your AI workspace</div>\n          </div>\n        </a>\n\n      <?php endif; ?>\n\n    </aside>\n\n    <?php\n    $current_user = wp_get_current_user();\n    $ms_role = \'guest\';\n    if (is_user_logged_in()) {\n      if (in_array(\'administrator\', $current_user->roles)) $ms_role = \'admin\';\n      elseif (in_array(\'editor\', $current_user->roles)) $ms_role = \'editor\';\n      else $ms_role = \'member\';\n    }\n    ?>\n    <script>\n    window.MS_USER_ROLE = <?php echo wp_json_encode($ms_role); ?>;\n    </script>\n\n    <main class=\"ms-main\">\n      <?php if ($is_search_lab && !$can_view_search_lab) : ?>\n        <div style=\"display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:#5f6368;\">\n          <div style=\"font-size:48px;\">🔒</div>\n          <div style=\"font-size:20px;font-weight:600;color:#202124;\">Access Restricted</div>\n          <div style=\"font-size:14px;text-align:center;line-height:1.7;max-width:360px;\">\n            Evaluation 僅限 Administrator 與 Editor 角色查看。<br>\n            如需存取權限，請聯繫管理員。\n          </div>\n          <a href=\"/lt-searching/\" style=\"margin-top:8px;padding:10px 24px;background:#1967d2;color:#fff;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;\">\n            返回首頁\n          </a>\n        </div>\n      <?php else : ?>\n        <?php echo $content; ?>\n      <?php endif; ?>\n    </main>\n\n  </div>\n\n  <?php\n  return ob_get_clean();\n\n}, 99);\n\n/* =========================================================\n * 4) login page prefill when fallback happens\n * ========================================================= */\nadd_action(\'login_footer\', function () {\n  if (empty($_GET[\'ms_prefill\'])) return;\n  $login = sanitize_user(wp_unslash($_GET[\'ms_prefill\']));\n  ?>\n  <script>\n    document.addEventListener(\'DOMContentLoaded\', function () {\n      var input = document.getElementById(\'user_login\');\n      if (input) {\n        input.value = <?php echo wp_json_encode($login); ?>;\n        setTimeout(function () {\n          var pass = document.getElementById(\'user_pass\');\n          if (pass) pass.focus();\n        }, 50);\n      }\n    });\n	\n  </script>\n  <?php\n});','','global',0,10,1,'2026-05-29 11:07:12',1,NULL),
(40,'WW - 0809 - API - 20260316','','add_action(\'wp_footer\', function () {\n\nif (!is_page(\'ww-0809-api\')) return;\n\n?>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  var tries = 0;\n\n  function boot() {\n    var root        = document.getElementById(\"msResultsRoot\");\n    var grid        = document.getElementById(\"msrGrid\");\n    var filterBtn   = document.getElementById(\"msrFilterBtn\");\n    var filterPanel = document.getElementById(\"msrFilterPanel\");\n\n    if (!root || !grid || !filterBtn || !filterPanel) {\n      if (++tries < 40) setTimeout(boot, 200);\n      return;\n    }\n\n    /* =========================================================\n       W3 Mock Result Page\n       目的：\n       1. 先用 Mock response render 搜尋結果頁\n       2. 保留 filter / recently viewed / player modal\n       3. 補 search / click / play event payload\n       4. 之後 n8n API ready 時，可再切成真 API\n       ========================================================= */\n\n    var EVENT_ENDPOINT = \'\';\n    /* n8n /event 完成後改這裡，例如：\n       var EVENT_ENDPOINT = \'https://n8n.momentry.ddns.net/webhook/event\';\n    */\n\n    function nowISO(){\n      return new Date().toISOString();\n    }\n\n    function sendEvent(payload){\n      console.log(\'[Momentry Event]\', payload);\n\n      if (!EVENT_ENDPOINT) {\n        return Promise.resolve({mock:true});\n      }\n\n      return fetch(EVENT_ENDPOINT, {\n        method: \'POST\',\n        headers: {\'Content-Type\':\'application/json\'},\n        body: JSON.stringify(payload)\n      }).catch(function(err){\n        console.warn(\'Event 送出失敗：\', err);\n      });\n    }\n\n    function getQueryFromUrl(){\n      var p = new URLSearchParams(window.location.search);\n      return (p.get(\'q\') || \'\').trim();\n    }\n\n    var CURRENT_QUERY = getQueryFromUrl() || \'風景\';\n\n    /* ===== Mock Search Results ===== */\n    var MEDIA = [\n      {id:1,  type:\'image\',title:\'城市街道夜景\',  file:\'city_night_001.jpg\',   folder:\'旅遊/城市\', snippet:\'霓虹燈映照下的繁華街道\',time:\'2026/01/04\',timeMs:new Date(\'2026/01/04\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\',source:\'本地資料夾\',sizeKB:3840,durationSec:0},\n      {id:2,  type:\'image\',title:\'山頂雲海日出\',  file:\'mountain_sunrise.jpg\', folder:\'自然/山景\', snippet:\'清晨山頂雲海翻騰\',time:\'2025/11/15\',timeMs:new Date(\'2025/11/15\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/2049b122306232e42f117f7203bbb939.jpg\',source:\'本地資料夾\',sizeKB:5200,durationSec:0},\n      {id:3,  type:\'image\',title:\'海岸礁石風光\',  file:\'coast_rocks.jpg\',      folder:\'自然/海岸\', snippet:\'海浪拍打礁石，藍天白雲映照\',time:\'2025/08/22\',timeMs:new Date(\'2025/08/22\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\',source:\'本地資料夾\',sizeKB:2100,durationSec:0},\n      {id:4,  type:\'image\',title:\'古典建築倒影\',  file:\'ancient_arch.jpg\',     folder:\'建築/古典\', snippet:\'古建築與現代城市融合\',time:\'2025/06/10\',timeMs:new Date(\'2025/06/10\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/76f951354df79af6011bc6d8fba12d88.jpg\',source:\'本地資料夾\',sizeKB:7800,durationSec:0},\n      {id:5,  type:\'image\',title:\'森林步道晨光\',  file:\'forest_morning.jpg\',   folder:\'自然/森林\', snippet:\'陽光穿透樹梢灑落步道\',time:\'2025/03/05\',timeMs:new Date(\'2025/03/05\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ffe86f4d085fa13f9a70e59c24a86a4b.jpg\',source:\'本地資料夾\',sizeKB:1540,durationSec:0},\n      {id:6,  type:\'image\',title:\'花田繽紛色彩\',  file:\'flower_field.jpg\',     folder:\'自然/花卉\', snippet:\'大片花田盛開，色彩繽紛\',time:\'2024/09/18\',timeMs:new Date(\'2024/09/18\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/785220f09814db1a8a0d2cf5c8ae9ef9.jpg\',source:\'本地資料夾\',sizeKB:4300,durationSec:0},\n      {id:7,  type:\'image\',title:\'雪山冰川全景\',  file:\'glacier_panorama.jpg\', folder:\'自然/雪山\', snippet:\'白雪皚皚的山峰，冰川延伸至遠方\',time:\'2024/05/30\',timeMs:new Date(\'2024/05/30\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6b8d1023a8434e4b78ca0b2d08244a36.jpg\',source:\'本地資料夾\',sizeKB:9200,durationSec:0},\n      {id:8,  type:\'image\',title:\'沙漠日落剪影\',  file:\'desert_sunset.jpg\',    folder:\'自然/沙漠\', snippet:\'沙丘起伏間的夕陽剪影\',time:\'2024/01/12\',timeMs:new Date(\'2024/01/12\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ddb136a8ca8460894854d4e8444d1887.jpg\',source:\'本地資料夾\',sizeKB:6600,durationSec:0},\n      {id:9,  type:\'video\',title:\'Outdoor Moment 橫式\',file:\'H_moment3.mp4\',folder:\'影片/戶外\',snippet:\'橫向影片片段\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\',source:\'原始影音庫\',sizeKB:185000,durationSec:605,duration:\'10:05\'},\n      {id:10, type:\'video\',title:\'Outdoor Moment 直式\',file:\'O_moment3.mp4\',folder:\'影片/戶外\',snippet:\'直向影片片段\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\',source:\'原始影音庫\',sizeKB:210000,durationSec:605,duration:\'10:05\'},\n      {id:11, type:\'image\',title:\'自然山景倒影\',  file:\'fuji_reflection.jpg\',  folder:\'旅遊/日本\', snippet:\'富士山湖面倒影，秋季楓葉點綴\',time:\'2023/10/07\',timeMs:new Date(\'2023/10/07\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6a30a40dgy1hrmpykxf3wj224r3757wi.jpg\',source:\'本地資料夾\',sizeKB:12400,durationSec:0},\n      {id:12, type:\'image\',title:\'日落黃金草原\',  file:\'golden_prairie.jpg\',   folder:\'自然/草原\', snippet:\'夕陽金光灑落草原\',time:\'2023/07/19\',timeMs:new Date(\'2023/07/19\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/lA7OhpEMRug-scaled.jpg\',source:\'本地資料夾\',sizeKB:8900,durationSec:0},\n      {id:13, type:\'image\',title:\'活動紀錄截圖\',  file:\'screenshot_0123.png\',  folder:\'活動/紀錄\', snippet:\'室內互動場景\',time:\'2026/01/23\',timeMs:new Date(\'2026/01/23\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ScreenShot_2026-01-23_170611_665-scaled.png\',source:\'本地資料夾\',sizeKB:980,durationSec:0},\n      {id:14, type:\'image\',title:\'品牌識別標誌\',  file:\'Accusys-logo_s.png\',   folder:\'品牌/素材\', snippet:\'企業品牌識別，清晰專業\',time:\'2026/02/01\',timeMs:new Date(\'2026/02/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/02/Accusys-logo_s-1.png\',source:\'本地資料夾\',sizeKB:55,durationSec:0}\n    ];\n\n    var RECENTLY = [\n      {id:1,  name:\'city_night_001.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\'},\n      {id:9,  name:\'H_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\'},\n      {id:3,  name:\'coast_rocks.jpg\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\'},\n      {id:10, name:\'O_moment3.mp4\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\'}\n    ];\n\n    function queryMatch(list, query){\n      var q = String(query || \'\').trim().toLowerCase();\n      if (!q) return list.slice();\n\n      return list.filter(function(m){\n        var text = [\n          m.title || \'\',\n          m.file || \'\',\n          m.folder || \'\',\n          m.snippet || \'\'\n        ].join(\' \').toLowerCase();\n\n        if (q.indexOf(\'海\') > -1 || q.indexOf(\'海邊\') > -1 || q.indexOf(\'海岸\') > -1) {\n          return /海|coast|sea/i.test(text);\n        }\n        if (q.indexOf(\'城市\') > -1 || q.indexOf(\'夜景\') > -1) {\n          return /城市|city|night/i.test(text);\n        }\n        if (q.indexOf(\'山\') > -1 || q.indexOf(\'自然\') > -1 || q.indexOf(\'風景\') > -1) {\n          return /山|森林|海岸|花田|雪山|草原|日落|自然|forest|coast|mountain|prairie|flower|glacier|desert|fuji/i.test(text);\n        }\n        if (q.indexOf(\'影片\') > -1 || q.indexOf(\'video\') > -1) {\n          return m.type === \'video\';\n        }\n        if (q.indexOf(\'照片\') > -1 || q.indexOf(\'image\') > -1) {\n          return m.type === \'image\';\n        }\n\n        return text.indexOf(q) > -1;\n      });\n    }\n\n    var SEARCH_BASE = queryMatch(MEDIA, CURRENT_QUERY);\n    if (!SEARCH_BASE.length) SEARCH_BASE = MEDIA.slice();\n\n    sendEvent({\n      event_type: \'search\',\n      query: CURRENT_QUERY,\n      moment_id: \'\',\n      video_id: \'\',\n      t_start: 0,\n      timestamp: nowISO()\n    });\n\n    var titleEl = root.querySelector(\'.msr-title\');\n    if (titleEl) {\n      titleEl.innerHTML = \'以下是找到符合 <strong>\' + escapeHtml(CURRENT_QUERY) + \'</strong> 的照片與影片\';\n    }\n\n    var MIN_TIME = Math.min.apply(null, SEARCH_BASE.map(function(m){ return m.timeMs; }));\n    var MAX_TIME = Math.max.apply(null, SEARCH_BASE.map(function(m){ return m.timeMs; }));\n\n    var SIZE_MIN_KB = 1024, SIZE_MAX_KB = 100*1024*1024;\n\n    function pctToSizeKB(p){\n      if(p<=0) return 0;\n      if(p>=100) return Infinity;\n      return Math.round(SIZE_MIN_KB*Math.pow(SIZE_MAX_KB/SIZE_MIN_KB,p/100));\n    }\n\n    function sizeValLabel(p){\n      if(p<=0) return \'1 MB 以下\';\n      if(p>=100) return \'100 GB+\';\n      var kb=pctToSizeKB(p);\n      if(kb>=1024*1024) return (kb/(1024*1024)).toFixed(1)+\' GB\';\n      if(kb>=1024) return Math.round(kb/1024)+\' MB\';\n      return Math.round(kb)+\' KB\';\n    }\n\n    function sizeKBFull(kb){\n      if(kb<=0) return \'0 KB\';\n      if(kb>=1024*1024) return (kb/(1024*1024)).toFixed(1)+\' GB\';\n      if(kb>=1024) return Math.round(kb/1024)+\' MB\';\n      return Math.round(kb)+\' KB\';\n    }\n\n    var DUR_MIN_SEC=3, DUR_MAX_SEC=10800;\n\n    function pctToDurSec(p){\n      if(p<=0) return 0;\n      if(p>=100) return Infinity;\n      return Math.round(DUR_MIN_SEC*Math.pow(DUR_MAX_SEC/DUR_MIN_SEC,p/100));\n    }\n\n    function durValLabel(p){\n      if(p<=0) return \'3 秒以下\';\n      if(p>=100) return \'3 小時以上\';\n      var s=pctToDurSec(p),h=Math.floor(s/3600),m=Math.floor((s%3600)/60),r=s%60;\n      if(h) return h+\' 時\'+(m?\' \'+m+\' 分\':\'\');\n      if(m) return m+\' 分\'+(r?\' \'+r+\' 秒\':\'\');\n      return s+\' 秒\';\n    }\n\n    var F = {\n      mediaType:\'all\',\n      sortTime:\'oldest\',\n      sortSize:\'none\',\n      sortName:\'none\',\n      timeMode:\'Range\',\n      dateStart:MIN_TIME,\n      dateEnd:MAX_TIME,\n      dateBefore:MAX_TIME,\n      dateAfter:MIN_TIME,\n      sizeMinPct:0,\n      sizeMaxPct:100,\n      sizeUnlimited:true,\n      durMinPct:0,\n      durMaxPct:100,\n      durUnlimited:true\n    };\n\n    function pad(n){ return n<10?\'0\'+n:\'\'+n; }\n\n    function fmtInput(ms){\n      var d=new Date(ms);\n      return d.getFullYear()+\'-\'+pad(d.getMonth()+1)+\'-\'+pad(d.getDate());\n    }\n\n    function parseInput(v){\n      if(!v) return null;\n      var d=new Date(v+\'T00:00:00\');\n      return isNaN(d.getTime())?null:d.getTime();\n    }\n\n    function startOfDay(ms){\n      var d=new Date(ms);\n      d.setHours(0,0,0,0);\n      return d.getTime();\n    }\n\n    function endOfDay(ms){\n      var d=new Date(ms);\n      d.setHours(23,59,59,999);\n      return d.getTime();\n    }\n\n    function escapeHtml(str){\n      return String(str == null ? \'\' : str)\n        .replace(/&/g,\'&amp;\')\n        .replace(/</g,\'&lt;\')\n        .replace(/>/g,\'&gt;\');\n    }\n\n    function iconFolder(){ return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M1 3.5a1 1 0 011-1h2.5L5.5 4H10a1 1 0 011 1v4a1 1 0 01-1 1H2a1 1 0 01-1-1v-5z\"/></svg>\'; }\n    function iconSize(){ return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" rx=\"1.5\"/><path d=\"M4 6h4M6 4v4\"/></svg>\'; }\n    function iconDate(){ return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"1\" y=\"2\" width=\"10\" height=\"9\" rx=\"1.5\"/><path d=\"M1 5h10M4 1v2M8 1v2\"/></svg>\'; }\n    function iconFile(){ return \'<svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"><path d=\"M2 1.5A.5.5 0 012.5 1h5L10 4.5V10.5a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-9z\"/><path d=\"M7.5 1v3.5H10\"/></svg>\'; }\n\n    function updateRangeFill(minEl,maxEl,fillEl){\n      if(!minEl||!maxEl||!fillEl) return;\n      var mn=parseFloat(minEl.value),mx=parseFloat(maxEl.value);\n      fillEl.style.left=mn+\'%\';\n      fillEl.style.width=(mx-mn)+\'%\';\n    }\n\n    function updateSizeUI(){\n      var mn=document.getElementById(\'msrSizeMin\'),\n          mx=document.getElementById(\'msrSizeMax\'),\n          fill=document.getElementById(\'msrSizeFill\');\n      var minLbl=document.getElementById(\'msrSizeMinLbl\'),\n          maxLbl=document.getElementById(\'msrSizeMaxLbl\'),\n          btn=document.getElementById(\'msrSizeUnlimited\');\n\n      if(!mn||!mx) return;\n\n      var a=parseInt(mn.value,10), b=parseInt(mx.value,10);\n      if(a>b){var t=a;a=b;b=t;mn.value=a;mx.value=b;}\n\n      F.sizeMinPct=a;\n      F.sizeMaxPct=b;\n\n      if(minLbl) minLbl.textContent=sizeValLabel(a);\n      if(maxLbl) maxLbl.textContent=sizeValLabel(b);\n\n      updateRangeFill(mn,mx,fill);\n\n      F.sizeUnlimited=(a===0&&b===100);\n      if(btn) btn.classList.toggle(\'active\',F.sizeUnlimited);\n    }\n\n    function updateDurUI(){\n      var mn=document.getElementById(\'msrDurMin\'),\n          mx=document.getElementById(\'msrDurMax\'),\n          fill=document.getElementById(\'msrDurFill\');\n      var minLbl=document.getElementById(\'msrDurMinLbl\'),\n          maxLbl=document.getElementById(\'msrDurMaxLbl\'),\n          btn=document.getElementById(\'msrDurUnlimited\');\n\n      if(!mn||!mx) return;\n\n      var a=parseInt(mn.value,10), b=parseInt(mx.value,10);\n      if(a>b){var t=a;a=b;b=t;mn.value=a;mx.value=b;}\n\n      F.durMinPct=a;\n      F.durMaxPct=b;\n\n      if(minLbl) minLbl.textContent=durValLabel(a);\n      if(maxLbl) maxLbl.textContent=durValLabel(b);\n\n      updateRangeFill(mn,mx,fill);\n\n      F.durUnlimited=(a===0&&b===100);\n      if(btn) btn.classList.toggle(\'active\',F.durUnlimited);\n    }\n\n    [\'msrSizeMin\',\'msrSizeMax\'].forEach(function(id){\n      var el=document.getElementById(id);\n      if(el) el.addEventListener(\'input\',updateSizeUI);\n    });\n\n    [\'msrDurMin\',\'msrDurMax\'].forEach(function(id){\n      var el=document.getElementById(id);\n      if(el) el.addEventListener(\'input\',updateDurUI);\n    });\n\n    var sBtnEl=document.getElementById(\'msrSizeUnlimited\');\n    if(sBtnEl){\n      sBtnEl.addEventListener(\'click\',function(e){\n        e.stopPropagation();\n        var mn=document.getElementById(\'msrSizeMin\'),\n            mx=document.getElementById(\'msrSizeMax\');\n        if(mn) mn.value=0;\n        if(mx) mx.value=100;\n        updateSizeUI();\n      });\n    }\n\n    var dBtnEl=document.getElementById(\'msrDurUnlimited\');\n    if(dBtnEl){\n      dBtnEl.addEventListener(\'click\',function(e){\n        e.stopPropagation();\n        var mn=document.getElementById(\'msrDurMin\'),\n            mx=document.getElementById(\'msrDurMax\');\n        if(mn) mn.value=0;\n        if(mx) mx.value=100;\n        updateDurUI();\n      });\n    }\n\n    function renderGrid(list){\n      if(!grid) return;\n\n      if(!list || !list.length){\n        grid.innerHTML=\'<div class=\"msr-no-results\">沒有符合條件的結果</div>\';\n        return;\n      }\n\n      grid.innerHTML=list.map(function(m){\n        var isVid=m.type===\'video\';\n        var thumb=isVid\n          ? \'<video src=\"\'+m.url+\'#t=0\" muted preload=\"metadata\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video>\'\n          : \'<img src=\"\'+m.url+\'\" alt=\"\'+escapeHtml(m.title)+\'\" loading=\"lazy\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n        var badge=isVid ? \'<span class=\"msr-vid-badge\">\'+m.duration+\'</span>\' : \'\';\n        var play=isVid ? \'<div class=\"msr-play-overlay\"><div class=\"msr-rv-play\"></div></div>\' : \'\';\n\n        return \'<div class=\"msr-card\'+(isVid?\' is-video\':\'\')+\'\" data-id=\"\'+m.id+\'\">\'\n          + \'<div class=\"msr-thumb\">\'+thumb+\'<span class=\"msr-type-badge\">\'+(isVid?\'VIDEO\':\'PHOTO\')+\'</span>\'+play+badge+\'</div>\'\n          + \'<div class=\"msr-card-meta\"><div class=\"msr-card-title\">\'+escapeHtml(m.title)+\'</div>\'\n          + \'<div class=\"msr-card-info\">\'\n          + \'<div class=\"msr-info-row\">\'+iconFile()+\'<span class=\"msr-info-val\">\'+escapeHtml(m.file)+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconFolder()+\'<span class=\"msr-info-val\">\'+escapeHtml(m.folder)+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconSize()+\'<span class=\"msr-info-val\">\'+sizeKBFull(m.sizeKB)+\'</span></div>\'\n          + \'<div class=\"msr-info-row\">\'+iconDate()+\'<span class=\"msr-info-val\">\'+escapeHtml(m.time)+\'</span></div>\'\n          + \'</div></div></div>\';\n      }).join(\'\');\n\n      grid.querySelectorAll(\'.msr-card\').forEach(function(card){\n        card.addEventListener(\'click\',function(){\n          var id = parseInt(card.getAttribute(\'data-id\'),10);\n          var m = SEARCH_BASE.filter(function(x){ return x.id===id; })[0];\n\n          if (m) {\n            sendEvent({\n              event_type: \'click\',\n              query: CURRENT_QUERY,\n              moment_id: \'mock-moment-\' + m.id,\n              video_id: \'mock-video-\' + m.id,\n              t_start: 0,\n              timestamp: nowISO()\n            });\n          }\n\n          openPlayer(id);\n        });\n      });\n    }\n\n    function renderRecently(){\n      var box=document.getElementById(\'msrRecentList\');\n      if(!box) return;\n\n      box.innerHTML=RECENTLY.map(function(r){\n        var thumb=r.type===\'video\'\n          ? \'<video src=\"\'+r.url+\'#t=0\" muted preload=\"metadata\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\"></video><div class=\"msr-rv-overlay\"><div class=\"msr-rv-play\"></div></div><span class=\"msr-rv-dur\">\'+r.duration+\'</span>\'\n          : \'<img src=\"\'+r.url+\'\" alt=\"\'+escapeHtml(r.name)+\'\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;box-shadow:none;max-width:none;\">\';\n\n        return \'<div class=\"msr-rv-item\" data-id=\"\'+r.id+\'\">\'\n          + \'<div class=\"msr-rv-thumb\">\'+thumb+\'</div>\'\n          + \'<div class=\"msr-rv-info\"><div class=\"msr-rv-name\">\'+escapeHtml(r.name)+\'</div>\'\n          + \'<div class=\"msr-rv-date\">2026/01/04</div><div class=\"msr-rv-path\">路徑/資料夾/photo</div>\'\n          + \'<div class=\"msr-rv-desc\">文字描述之類</div></div></div>\';\n      }).join(\'\');\n\n      box.querySelectorAll(\'.msr-rv-item\').forEach(function(item){\n        item.addEventListener(\'click\',function(){\n          var id = parseInt(item.getAttribute(\'data-id\'),10);\n          var m = SEARCH_BASE.filter(function(x){ return x.id===id; })[0];\n\n          if (m) {\n            sendEvent({\n              event_type: \'click\',\n              query: CURRENT_QUERY,\n              moment_id: \'mock-moment-\' + m.id,\n              video_id: \'mock-video-\' + m.id,\n              t_start: 0,\n              timestamp: nowISO()\n            });\n          }\n\n          openPlayer(id);\n        });\n      });\n    }\n\n    function getFilteredList(){\n      var r=SEARCH_BASE.slice();\n\n      if(F.mediaType===\'image\'){\n        r=r.filter(function(m){ return m.type===\'image\'; });\n      }else if(F.mediaType===\'video\'){\n        r=r.filter(function(m){ return m.type===\'video\'; });\n      }\n\n      if(F.timeMode===\'Range\'){\n        var s=startOfDay(F.dateStart), e=endOfDay(F.dateEnd);\n        r=r.filter(function(m){ return m.timeMs>=s && m.timeMs<=e; });\n      }else if(F.timeMode===\'Before\'){\n        var e2=endOfDay(F.dateBefore);\n        r=r.filter(function(m){ return m.timeMs<=e2; });\n      }else if(F.timeMode===\'After\'){\n        var s2=startOfDay(F.dateAfter);\n        r=r.filter(function(m){ return m.timeMs>=s2; });\n      }\n\n      if(!F.sizeUnlimited){\n        var sMin=pctToSizeKB(F.sizeMinPct),\n            sMax=F.sizeMaxPct>=100 ? Infinity : pctToSizeKB(F.sizeMaxPct);\n        r=r.filter(function(m){ return m.sizeKB>=sMin && m.sizeKB<=sMax; });\n      }\n\n      if(!F.durUnlimited){\n        var dMin=pctToDurSec(F.durMinPct),\n            dMax=F.durMaxPct>=100 ? Infinity : pctToDurSec(F.durMaxPct);\n        r=r.filter(function(m){\n          return m.type===\'video\' && m.durationSec>=dMin && (!isFinite(dMax) || m.durationSec<=dMax);\n        });\n      }\n\n      if(F.sortTime!==\'none\'){\n        r.sort(function(a,b){\n          return F.sortTime===\'newest\' ? b.timeMs-a.timeMs : a.timeMs-b.timeMs;\n        });\n      }else if(F.sortSize!==\'none\'){\n        r.sort(function(a,b){\n          return F.sortSize===\'largest\' ? b.sizeKB-a.sizeKB : a.sizeKB-b.sizeKB;\n        });\n      }else if(F.sortName!==\'none\'){\n        r.sort(function(a,b){\n          return F.sortName===\'az\'\n            ? a.title.localeCompare(b.title,\'zh-Hant\')\n            : b.title.localeCompare(a.title,\'zh-Hant\');\n        });\n      }\n\n      return r;\n    }\n\n    function applyFilter(){\n      renderGrid(getFilteredList());\n    }\n\n    function openPlayer(id){\n      var m=SEARCH_BASE.filter(function(x){ return x.id===id; })[0];\n      if(!m) return;\n\n      var media=document.getElementById(\'msrPlayerMedia\'),\n          modal=document.getElementById(\'msPlayerModal\');\n\n      if(!media || !modal) return;\n\n      if(m.type===\'video\'){\n        media.innerHTML=\'<video id=\"msrPlayerVideo\" src=\"\'+m.url+\'\" controls autoplay style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#000;\"></video>\';\n      }else{\n        media.innerHTML=\'<img src=\"\'+m.url+\'\" alt=\"\'+escapeHtml(m.title)+\'\" style=\"width:100%;max-height:460px;object-fit:contain;display:block;background:#111;\">\';\n      }\n\n      var t=document.getElementById(\'msrPlayerTitle\'),\n          p=document.getElementById(\'msrPlayerPath\'),\n          s=document.getElementById(\'msrPlayerSnip\'),\n          mt=document.getElementById(\'msrPlayerMeta\');\n\n      if(t) t.textContent=m.title;\n      if(p) p.textContent=m.folder+\' / \'+m.file;\n      if(s) s.textContent=\'「\'+m.snippet+\'」\';\n      if(mt){\n        mt.innerHTML=\'<span>📅 \'+m.time+\'</span><span>💾 \'+sizeKBFull(m.sizeKB)+\'</span><span>🗂 \'+m.source+\'</span>\'+(m.type===\'video\' ? \'<span>⏱ \'+m.duration+\'</span>\' : \'\');\n      }\n\n      modal.classList.add(\'msr-open\');\n\n      if(m.type === \'video\'){\n        var v = document.getElementById(\'msrPlayerVideo\');\n        var playedOnce = false;\n\n        if(v){\n          v.addEventListener(\'play\', function(){\n            if(playedOnce) return;\n            playedOnce = true;\n\n            sendEvent({\n              event_type: \'play\',\n              query: CURRENT_QUERY,\n              moment_id: \'mock-moment-\' + m.id,\n              video_id: \'mock-video-\' + m.id,\n              t_start: 0,\n              timestamp: nowISO()\n            });\n          });\n        }\n      }\n    }\n\n    function closePlayer(){\n      var modal=document.getElementById(\'msPlayerModal\'),\n          media=document.getElementById(\'msrPlayerMedia\');\n      if(modal) modal.classList.remove(\'msr-open\');\n      if(media) media.innerHTML=\'\';\n    }\n\n    var rangeStartInput = document.getElementById(\'msrDateStart\');\n    var rangeEndInput   = document.getElementById(\'msrDateEnd\');\n    var beforeInput     = document.getElementById(\'msrDateBefore\');\n    var afterInput      = document.getElementById(\'msrDateAfter\');\n\n    if(rangeStartInput) rangeStartInput.value = fmtInput(F.dateStart);\n    if(rangeEndInput)   rangeEndInput.value   = fmtInput(F.dateEnd);\n\n    if(beforeInput){\n      beforeInput.value = fmtInput(F.dateBefore);\n      beforeInput.addEventListener(\'change\', function(){\n        var t = parseInput(this.value);\n        if(t!==null) F.dateBefore = t;\n      });\n    }\n\n    if(afterInput){\n      afterInput.value = fmtInput(F.dateAfter);\n      afterInput.addEventListener(\'change\', function(){\n        var t = parseInput(this.value);\n        if(t!==null) F.dateAfter = t;\n      });\n    }\n\n    function syncRangeInputs(){\n      if(!rangeStartInput || !rangeEndInput) return;\n\n      var s = parseInput(rangeStartInput.value);\n      var e = parseInput(rangeEndInput.value);\n\n      if(s===null || e===null) return;\n\n      if(s > e){\n        var tmp = s;\n        s = e;\n        e = tmp;\n\n        rangeStartInput.value = fmtInput(s);\n        rangeEndInput.value   = fmtInput(e);\n      }\n\n      F.dateStart = s;\n      F.dateEnd   = e;\n    }\n\n    if(rangeStartInput){\n      rangeStartInput.addEventListener(\'change\', syncRangeInputs);\n    }\n\n    if(rangeEndInput){\n      rangeEndInput.addEventListener(\'change\', syncRangeInputs);\n    }\n\n    filterBtn.addEventListener(\'click\',function(e){\n      e.stopPropagation();\n      filterPanel.classList.toggle(\'msr-open\');\n    });\n\n    filterPanel.addEventListener(\'click\',function(e){\n      e.stopPropagation();\n    });\n\n    document.addEventListener(\'click\',function(e){\n      if(!e.target.closest(\'.msr-filter-anchor\')){\n        filterPanel.classList.remove(\'msr-open\');\n      }\n    });\n\n    document.querySelectorAll(\'.msr-type-pill\').forEach(function(btn){\n      btn.addEventListener(\'click\',function(){\n        document.querySelectorAll(\'.msr-type-pill\').forEach(function(b){\n          b.classList.remove(\'active\');\n        });\n        btn.classList.add(\'active\');\n        F.mediaType=btn.getAttribute(\'data-type\') || \'all\';\n      });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortTime\"]\').forEach(function(r){\n      r.addEventListener(\'change\',function(){ F.sortTime=this.value; });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortSize\"]\').forEach(function(r){\n      r.addEventListener(\'change\',function(){ F.sortSize=this.value; });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortName\"]\').forEach(function(r){\n      r.addEventListener(\'change\',function(){ F.sortName=this.value; });\n    });\n\n    document.querySelectorAll(\'.msr-time-tab\').forEach(function(tab){\n      tab.addEventListener(\'click\',function(){\n        document.querySelectorAll(\'.msr-time-tab\').forEach(function(t){\n          t.classList.remove(\'active\');\n        });\n        document.querySelectorAll(\'.msr-time-pane\').forEach(function(p){\n          p.classList.remove(\'active\');\n        });\n\n        tab.classList.add(\'active\');\n        var pane=tab.getAttribute(\'data-pane\');\n        F.timeMode=pane;\n\n        var pEl=document.getElementById(\'msrPane\'+pane);\n        if(pEl) pEl.classList.add(\'active\');\n      });\n    });\n\n    var applyBtn=document.getElementById(\'msrApplyFilter\');\n    if(applyBtn){\n      applyBtn.addEventListener(\'click\',function(e){\n        e.stopPropagation();\n        syncRangeInputs();\n        applyFilter();\n        filterPanel.classList.remove(\'msr-open\');\n      });\n    }\n\n    var pClose=document.getElementById(\'msrPlayerClose\');\n    if(pClose) pClose.addEventListener(\'click\',closePlayer);\n\n    var pModal=document.getElementById(\'msPlayerModal\');\n    if(pModal){\n      pModal.addEventListener(\'click\',function(e){\n        if(e.target===this) closePlayer();\n      });\n    }\n\n    updateSizeUI();\n    updateDurUI();\n    applyFilter();\n    renderRecently();\n  }\n\n  boot();\n});\n</script>\n<?php\n}, 999);','','global',0,10,-1,'2026-03-16 13:46:34',1,NULL),
(41,'WW - 10 - API - 20260316','','add_action(\'wp_footer\', function () {\n\n  if (!is_page(\'ww-10-api\')) return;\n?>\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  var tries = 0;\n\n  function boot() {\n    var viewer       = document.getElementById(\"viewer\");\n    var mainTitle    = document.getElementById(\"mainTitle\");\n    var mainMeta     = document.getElementById(\"mainMeta\");\n    var strip        = document.getElementById(\"strip\");\n    var recentList   = document.getElementById(\"recentList\");\n    var filterBtn    = document.getElementById(\"msrFilterBtn\");\n    var filterPanel  = document.getElementById(\"msrFilterPanel\");\n\n    if (!viewer || !mainTitle || !mainMeta || !strip || !recentList || !filterBtn || !filterPanel) {\n      if (++tries < 40) setTimeout(boot, 200);\n      return;\n    }\n\n    var MEDIA = [\n      {id:1,  type:\'image\',title:\'城市街道夜景\',  file:\'city_night_001.jpg\',   folder:\'旅遊/城市\', snippet:\'霓虹燈映照下的繁華街道\',time:\'2026/01/04\',timeMs:new Date(\'2026/01/04\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\',source:\'本地資料夾\',sizeKB:3840,durationSec:0},\n      {id:2,  type:\'image\',title:\'山頂雲海日出\',  file:\'mountain_sunrise.jpg\', folder:\'自然/山景\', snippet:\'清晨山頂雲海翻騰\',time:\'2025/11/15\',timeMs:new Date(\'2025/11/15\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/2049b122306232e42f117f7203bbb939.jpg\',source:\'本地資料夾\',sizeKB:5200,durationSec:0},\n      {id:3,  type:\'image\',title:\'海岸礁石風光\',  file:\'coast_rocks.jpg\',      folder:\'自然/海岸\', snippet:\'海浪拍打礁石，藍天白雲映照\',time:\'2025/08/22\',timeMs:new Date(\'2025/08/22\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\',source:\'本地資料夾\',sizeKB:2100,durationSec:0},\n      {id:4,  type:\'image\',title:\'古典建築倒影\',  file:\'ancient_arch.jpg\',     folder:\'建築/古典\', snippet:\'古建築與現代城市融合\',time:\'2025/06/10\',timeMs:new Date(\'2025/06/10\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/76f951354df79af6011bc6d8fba12d88.jpg\',source:\'本地資料夾\',sizeKB:7800,durationSec:0},\n      {id:5,  type:\'image\',title:\'森林步道晨光\',  file:\'forest_morning.jpg\',   folder:\'自然/森林\', snippet:\'陽光穿透樹梢灑落步道\',time:\'2025/03/05\',timeMs:new Date(\'2025/03/05\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ffe86f4d085fa13f9a70e59c24a86a4b.jpg\',source:\'本地資料夾\',sizeKB:1540,durationSec:0},\n      {id:6,  type:\'image\',title:\'花田繽紛色彩\',  file:\'flower_field.jpg\',     folder:\'自然/花卉\', snippet:\'大片花田盛開，色彩繽紛\',time:\'2024/09/18\',timeMs:new Date(\'2024/09/18\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/785220f09814db1a8a0d2cf5c8ae9ef9.jpg\',source:\'本地資料夾\',sizeKB:4300,durationSec:0},\n      {id:7,  type:\'image\',title:\'雪山冰川全景\',  file:\'glacier_panorama.jpg\', folder:\'自然/雪山\', snippet:\'白雪皚皚的山峰，冰川延伸至遠方\',time:\'2024/05/30\',timeMs:new Date(\'2024/05/30\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6b8d1023a8434e4b78ca0b2d08244a36.jpg\',source:\'本地資料夾\',sizeKB:9200,durationSec:0},\n      {id:8,  type:\'image\',title:\'沙漠日落剪影\',  file:\'desert_sunset.jpg\',    folder:\'自然/沙漠\', snippet:\'沙丘起伏間的夕陽剪影\',time:\'2024/01/12\',timeMs:new Date(\'2024/01/12\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ddb136a8ca8460894854d4e8444d1887.jpg\',source:\'本地資料夾\',sizeKB:6600,durationSec:0},\n      {id:9,  type:\'video\',title:\'Outdoor Moment 橫式\',file:\'H_moment3.mp4\',folder:\'影片/戶外\',snippet:\'橫向影片片段\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\',source:\'原始影音庫\',sizeKB:185000,durationSec:605,duration:\'10:05\'},\n      {id:10, type:\'video\',title:\'Outdoor Moment 直式\',file:\'O_moment3.mp4\',folder:\'影片/戶外\',snippet:\'直向影片片段\',time:\'2026/03/01\',timeMs:new Date(\'2026/03/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\',source:\'原始影音庫\',sizeKB:210000,durationSec:605,duration:\'10:05\'},\n      {id:11, type:\'image\',title:\'自然山景倒影\',  file:\'fuji_reflection.jpg\',  folder:\'旅遊/日本\', snippet:\'富士山湖面倒影，秋季楓葉點綴\',time:\'2023/10/07\',timeMs:new Date(\'2023/10/07\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/6a30a40dgy1hrmpykxf3wj224r3757wi.jpg\',source:\'本地資料夾\',sizeKB:12400,durationSec:0},\n      {id:12, type:\'image\',title:\'日落黃金草原\',  file:\'golden_prairie.jpg\',   folder:\'自然/草原\', snippet:\'夕陽金光灑落草原\',time:\'2023/07/19\',timeMs:new Date(\'2023/07/19\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/lA7OhpEMRug-scaled.jpg\',source:\'本地資料夾\',sizeKB:8900,durationSec:0},\n      {id:13, type:\'image\',title:\'活動紀錄截圖\',  file:\'screenshot_0123.png\',  folder:\'活動/紀錄\', snippet:\'室內互動場景\',time:\'2026/01/23\',timeMs:new Date(\'2026/01/23\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/ScreenShot_2026-01-23_170611_665-scaled.png\',source:\'本地資料夾\',sizeKB:980,durationSec:0},\n      {id:14, type:\'image\',title:\'品牌識別標誌\',  file:\'Accusys-logo_s.png\',   folder:\'品牌/素材\', snippet:\'企業品牌識別，清晰專業\',time:\'2026/02/01\',timeMs:new Date(\'2026/02/01\').getTime(),url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/02/Accusys-logo_s-1.png\',source:\'本地資料夾\',sizeKB:55,durationSec:0}\n    ];\n\n    var RECENTLY = [\n      {id:1,  name:\'Name02\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/0270da6e6169696e886d868f384a1e4a.jpg\'},\n      {id:9,  name:\'Name03\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/H_moment3.mp4\'},\n      {id:3,  name:\'Name06\',type:\'image\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/7d677774ca665d0d07178ea99ee0bd45.jpg\'},\n      {id:10, name:\'Name07\',type:\'video\',duration:\'10:05\',url:\'https://wp.momentry.ddns.net/wp-content/uploads/2026/03/O_moment3.mp4\'}\n    ];\n\n    var MIN_TIME = Math.min.apply(null, MEDIA.map(function(m){ return m.timeMs; }));\n    var MAX_TIME = Math.max.apply(null, MEDIA.map(function(m){ return m.timeMs; }));\n\n    var SIZE_MIN_KB = 1024, SIZE_MAX_KB = 100 * 1024 * 1024;\n    function pctToSizeKB(p){ if(p<=0) return 0; if(p>=100) return Infinity; return Math.round(SIZE_MIN_KB * Math.pow(SIZE_MAX_KB / SIZE_MIN_KB, p / 100)); }\n    function sizeValLabel(p){ if(p<=0) return \'1 MB 以下\'; if(p>=100) return \'100 GB+\'; var kb = pctToSizeKB(p); if(kb>=1024*1024) return (kb/(1024*1024)).toFixed(1)+\' GB\'; if(kb>=1024) return Math.round(kb/1024)+\' MB\'; return Math.round(kb)+\' KB\'; }\n    function sizeKBFull(kb){ if(kb<=0) return \'0 KB\'; if(kb>=1024*1024) return (kb/(1024*1024)).toFixed(1)+\' GB\'; if(kb>=1024) return Math.round(kb/1024)+\' MB\'; return Math.round(kb)+\' KB\'; }\n\n    var DUR_MIN_SEC = 3, DUR_MAX_SEC = 10800;\n    function pctToDurSec(p){ if(p<=0) return 0; if(p>=100) return Infinity; return Math.round(DUR_MIN_SEC * Math.pow(DUR_MAX_SEC / DUR_MIN_SEC, p / 100)); }\n    function durValLabel(p){\n      if(p<=0) return \'3 秒以下\';\n      if(p>=100) return \'3 小時以上\';\n      var s = pctToDurSec(p), h = Math.floor(s/3600), m = Math.floor((s%3600)/60), r = s%60;\n      if(h) return h+\' 時\'+(m ? \' \'+m+\' 分\' : \'\');\n      if(m) return m+\' 分\'+(r ? \' \'+r+\' 秒\' : \'\');\n      return s+\' 秒\';\n    }\n\n    var F = {\n      mediaType:\'all\',\n      sortTime:\'oldest\',\n      sortSize:\'none\',\n      sortName:\'none\',\n      timeMode:\'Range\',\n      dateStart:MIN_TIME,\n      dateEnd:MAX_TIME,\n      dateBefore:MAX_TIME,\n      dateAfter:MIN_TIME,\n      sizeMinPct:0,\n      sizeMaxPct:100,\n      sizeUnlimited:true,\n      durMinPct:0,\n      durMaxPct:100,\n      durUnlimited:true\n    };\n\n    var currentId = MEDIA[0].id;\n\n    function pad(n){ return n<10 ? \'0\'+n : \'\'+n; }\n    function fmtInput(ms){ var d = new Date(ms); return d.getFullYear()+\'-\'+pad(d.getMonth()+1)+\'-\'+pad(d.getDate()); }\n    function parseInput(v){ if(!v) return null; var d = new Date(v+\'T00:00:00\'); return isNaN(d.getTime()) ? null : d.getTime(); }\n    function startOfDay(ms){ var d = new Date(ms); d.setHours(0,0,0,0); return d.getTime(); }\n    function endOfDay(ms){ var d = new Date(ms); d.setHours(23,59,59,999); return d.getTime(); }\n\n    function renderViewer(item){\n      if(!item) return;\n      currentId = item.id;\n      if(item.type === \'video\'){\n        viewer.innerHTML =\n          \'<video controls autoplay playsinline>\' +\n            \'<source src=\"\' + item.url + \'\" type=\"video/mp4\">\' +\n          \'</video>\' +\n          \'<div class=\"img-overlay\"></div>\';\n      } else {\n        viewer.innerHTML =\n          \'<img class=\"main-img\" src=\"\' + item.url + \'\" alt=\"\' + item.title + \'\">\' +\n          \'<div class=\"img-overlay\"></div>\';\n      }\n      mainTitle.textContent = item.title;\n      mainMeta.innerHTML =\n        item.time + \'<br>\' +\n        item.folder + \'/photo<br>\' +\n        item.snippet;\n    }\n\n    function renderStrip(list){\n      if(!list || !list.length){\n        strip.innerHTML = \'<div style=\"color:#999;font-size:13px;padding:10px 0;\">沒有符合條件的結果</div>\';\n        return;\n      }\n      strip.innerHTML = list.map(function(m){\n        var isActive = m.id === currentId;\n        var mediaThumb = m.type === \'video\'\n          ? \'<video muted preload=\"metadata\" src=\"\' + m.url + \'#t=0\"></video><div class=\"clip-play-icon\">▶</div><span class=\"clip-dur\">\' + (m.duration || \'\') + \'</span>\'\n          : \'<img src=\"\' + m.url + \'\" alt=\"\' + m.title + \'\">\';\n        return \'\' +\n          \'<div class=\"clip-card \' + (isActive ? \'active\' : \'\') + \'\" data-id=\"\' + m.id + \'\">\' +\n            \'<div class=\"clip-thumb-wrap\">\' +\n              mediaThumb +\n              \'<span class=\"clip-badge\">\' + (m.type === \'video\' ? \'影片\' : \'照片\') + \'</span>\' +\n            \'</div>\' +\n            \'<div class=\"clip-info\">\' +\n              \'<div class=\"clip-title\">\' + m.title + \'</div>\' +\n              \'<div class=\"clip-sub\">\' + m.time + \'</div>\' +\n            \'</div>\' +\n          \'</div>\';\n      }).join(\'\');\n      strip.querySelectorAll(\'.clip-card\').forEach(function(card){\n        card.addEventListener(\'click\', function(){\n          var id = parseInt(card.getAttribute(\'data-id\'), 10);\n          var target = MEDIA.filter(function(x){ return x.id === id; })[0];\n          if(target){\n            renderViewer(target);\n            renderStrip(getFilteredList());\n          }\n        });\n      });\n    }\n\n    function renderRecently(){\n      recentList.innerHTML = RECENTLY.map(function(r){\n        var thumb = r.type === \'video\'\n          ? \'<video muted preload=\"metadata\" src=\"\' + r.url + \'#t=0\"></video><div class=\"rc-play-icon\">▶</div><span class=\"rc-dur\">\' + r.duration + \'</span>\'\n          : \'<img src=\"\' + r.url + \'\" alt=\"\' + r.name + \'\">\';\n        return \'\' +\n          \'<div class=\"rc-item\" data-id=\"\' + r.id + \'\">\' +\n            \'<div class=\"rc-thumb\">\' + thumb + \'</div>\' +\n            \'<div class=\"rc-info\">\' +\n              \'<div class=\"rc-name\">\' + r.name + \'</div>\' +\n              \'<div class=\"rc-date\">2026/01/04</div>\' +\n              \'<div class=\"rc-path\">路徑/資料夾/photo</div>\' +\n              \'<div class=\"rc-desc\">文字描述之類</div>\' +\n            \'</div>\' +\n          \'</div>\';\n      }).join(\'\');\n      recentList.querySelectorAll(\'.rc-item\').forEach(function(item){\n        item.addEventListener(\'click\', function(){\n          var id = parseInt(item.getAttribute(\'data-id\'), 10);\n          var target = MEDIA.filter(function(x){ return x.id === id; })[0];\n          if(target){\n            renderViewer(target);\n            renderStrip(getFilteredList());\n          }\n        });\n      });\n    }\n\n    function getFilteredList(){\n      var r = MEDIA.slice();\n      if(F.mediaType === \'image\'){\n        r = r.filter(function(m){ return m.type === \'image\'; });\n      } else if(F.mediaType === \'video\'){\n        r = r.filter(function(m){ return m.type === \'video\'; });\n      }\n      if(F.timeMode === \'Range\'){\n        var s = startOfDay(F.dateStart), e = endOfDay(F.dateEnd);\n        r = r.filter(function(m){ return m.timeMs >= s && m.timeMs <= e; });\n      } else if(F.timeMode === \'Before\'){\n        var e2 = endOfDay(F.dateBefore);\n        r = r.filter(function(m){ return m.timeMs <= e2; });\n      } else if(F.timeMode === \'After\'){\n        var s2 = startOfDay(F.dateAfter);\n        r = r.filter(function(m){ return m.timeMs >= s2; });\n      }\n      if(!F.sizeUnlimited){\n        var sMin = pctToSizeKB(F.sizeMinPct),\n            sMax = F.sizeMaxPct >= 100 ? Infinity : pctToSizeKB(F.sizeMaxPct);\n        r = r.filter(function(m){ return m.sizeKB >= sMin && m.sizeKB <= sMax; });\n      }\n      if(!F.durUnlimited){\n        var dMin = pctToDurSec(F.durMinPct),\n            dMax = F.durMaxPct >= 100 ? Infinity : pctToDurSec(F.durMaxPct);\n        r = r.filter(function(m){\n          return m.type === \'video\' && m.durationSec >= dMin && (!isFinite(dMax) || m.durationSec <= dMax);\n        });\n      }\n      if(F.sortTime !== \'none\'){\n        r.sort(function(a,b){\n          return F.sortTime === \'newest\' ? b.timeMs - a.timeMs : a.timeMs - b.timeMs;\n        });\n      } else if(F.sortSize !== \'none\'){\n        r.sort(function(a,b){\n          return F.sortSize === \'largest\' ? b.sizeKB - a.sizeKB : a.sizeKB - b.sizeKB;\n        });\n      } else if(F.sortName !== \'none\'){\n        r.sort(function(a,b){\n          return F.sortName === \'az\'\n            ? a.title.localeCompare(b.title, \'zh-Hant\')\n            : b.title.localeCompare(a.title, \'zh-Hant\');\n        });\n      }\n      return r;\n    }\n\n    function ensureViewerStillValid(filtered){\n      if(!filtered.length) return;\n      var stillExists = filtered.some(function(x){ return x.id === currentId; });\n      if(!stillExists){ renderViewer(filtered[0]); }\n    }\n\n    function applyFilter(){\n      var filtered = getFilteredList();\n      if(!filtered.length){\n        strip.innerHTML = \'<div style=\"color:#999;font-size:13px;padding:10px 0;\">沒有符合條件的結果</div>\';\n        return;\n      }\n      ensureViewerStillValid(filtered);\n      renderStrip(filtered);\n    }\n\n    function updateRangeFill(minEl,maxEl,fillEl){\n      if(!minEl || !maxEl || !fillEl) return;\n      var mn = parseFloat(minEl.value), mx = parseFloat(maxEl.value);\n      fillEl.style.left = mn + \'%\';\n      fillEl.style.width = (mx - mn) + \'%\';\n    }\n\n    function updateSizeUI(){\n      var mn = document.getElementById(\'msrSizeMin\'),\n          mx = document.getElementById(\'msrSizeMax\'),\n          fill = document.getElementById(\'msrSizeFill\');\n      var minLbl = document.getElementById(\'msrSizeMinLbl\'),\n          maxLbl = document.getElementById(\'msrSizeMaxLbl\'),\n          btn = document.getElementById(\'msrSizeUnlimited\');\n      if(!mn || !mx) return;\n      var a = parseInt(mn.value,10), b = parseInt(mx.value,10);\n      if(a > b){ var t = a; a = b; b = t; mn.value = a; mx.value = b; }\n      F.sizeMinPct = a; F.sizeMaxPct = b;\n      if(minLbl) minLbl.textContent = sizeValLabel(a);\n      if(maxLbl) maxLbl.textContent = sizeValLabel(b);\n      updateRangeFill(mn,mx,fill);\n      F.sizeUnlimited = (a === 0 && b === 100);\n      if(btn) btn.classList.toggle(\'active\', F.sizeUnlimited);\n    }\n\n    function updateDurUI(){\n      var mn = document.getElementById(\'msrDurMin\'),\n          mx = document.getElementById(\'msrDurMax\'),\n          fill = document.getElementById(\'msrDurFill\');\n      var minLbl = document.getElementById(\'msrDurMinLbl\'),\n          maxLbl = document.getElementById(\'msrDurMaxLbl\'),\n          btn = document.getElementById(\'msrDurUnlimited\');\n      if(!mn || !mx) return;\n      var a = parseInt(mn.value,10), b = parseInt(mx.value,10);\n      if(a > b){ var t = a; a = b; b = t; mn.value = a; mx.value = b; }\n      F.durMinPct = a; F.durMaxPct = b;\n      if(minLbl) minLbl.textContent = durValLabel(a);\n      if(maxLbl) maxLbl.textContent = durValLabel(b);\n      updateRangeFill(mn,mx,fill);\n      F.durUnlimited = (a === 0 && b === 100);\n      if(btn) btn.classList.toggle(\'active\', F.durUnlimited);\n    }\n\n    [\'msrSizeMin\',\'msrSizeMax\'].forEach(function(id){\n      var el = document.getElementById(id);\n      if(el) el.addEventListener(\'input\', updateSizeUI);\n    });\n\n    [\'msrDurMin\',\'msrDurMax\'].forEach(function(id){\n      var el = document.getElementById(id);\n      if(el) el.addEventListener(\'input\', updateDurUI);\n    });\n\n    var sizeUnlimitedBtn = document.getElementById(\'msrSizeUnlimited\');\n    if(sizeUnlimitedBtn){\n      sizeUnlimitedBtn.addEventListener(\'click\', function(e){\n        e.stopPropagation();\n        var mn = document.getElementById(\'msrSizeMin\'), mx = document.getElementById(\'msrSizeMax\');\n        if(mn) mn.value = 0;\n        if(mx) mx.value = 100;\n        updateSizeUI();\n      });\n    }\n\n    var durUnlimitedBtn = document.getElementById(\'msrDurUnlimited\');\n    if(durUnlimitedBtn){\n      durUnlimitedBtn.addEventListener(\'click\', function(e){\n        e.stopPropagation();\n        var mn = document.getElementById(\'msrDurMin\'), mx = document.getElementById(\'msrDurMax\');\n        if(mn) mn.value = 0;\n        if(mx) mx.value = 100;\n        updateDurUI();\n      });\n    }\n\n    var rangeStartInput = document.getElementById(\'msrDateStart\');\n    var rangeEndInput   = document.getElementById(\'msrDateEnd\');\n    var beforeInput     = document.getElementById(\'msrDateBefore\');\n    var afterInput      = document.getElementById(\'msrDateAfter\');\n\n    if(rangeStartInput) rangeStartInput.value = fmtInput(F.dateStart);\n    if(rangeEndInput)   rangeEndInput.value   = fmtInput(F.dateEnd);\n\n    if(beforeInput){\n      beforeInput.value = fmtInput(F.dateBefore);\n      beforeInput.addEventListener(\'change\', function(){\n        var t = parseInput(this.value);\n        if(t !== null) F.dateBefore = t;\n      });\n    }\n\n    if(afterInput){\n      afterInput.value = fmtInput(F.dateAfter);\n      afterInput.addEventListener(\'change\', function(){\n        var t = parseInput(this.value);\n        if(t !== null) F.dateAfter = t;\n      });\n    }\n\n    function syncRangeInputs(){\n      if(!rangeStartInput || !rangeEndInput) return;\n      var s = parseInput(rangeStartInput.value);\n      var e = parseInput(rangeEndInput.value);\n      if(s === null || e === null) return;\n      if(s > e){\n        var tmp = s; s = e; e = tmp;\n        rangeStartInput.value = fmtInput(s);\n        rangeEndInput.value   = fmtInput(e);\n      }\n      F.dateStart = s;\n      F.dateEnd   = e;\n    }\n\n    if(rangeStartInput) rangeStartInput.addEventListener(\'change\', syncRangeInputs);\n    if(rangeEndInput)   rangeEndInput.addEventListener(\'change\', syncRangeInputs);\n\n    function positionPanel(){\n  var rect = filterBtn.getBoundingClientRect();\n  var margin = 8;\n  var panelMaxH = window.innerHeight * 0.8;\n\n  // 右對齊按鈕，保護左邊界\n  var rightOffset = window.innerWidth - rect.right;\n  filterPanel.style.right = Math.max(rightOffset, margin) + \'px\';\n  filterPanel.style.left  = \'auto\';\n\n  // 固定 maxHeight\n  filterPanel.style.maxHeight = panelMaxH + \'px\';\n\n  // 上方空間夠就往上，不夠就往下\n  var spaceAbove = rect.top - margin;\n  if(spaceAbove >= 300){\n    filterPanel.style.bottom = (window.innerHeight - rect.top + margin) + \'px\';\n    filterPanel.style.top    = \'auto\';\n  } else {\n    filterPanel.style.top    = (rect.bottom + margin) + \'px\';\n    filterPanel.style.bottom = \'auto\';\n  }\n}\n\n    filterBtn.addEventListener(\'click\', function(e){\n      e.stopPropagation();\n      if(!filterPanel.classList.contains(\'msr-open\')){\n        positionPanel();\n      }\n      filterPanel.classList.toggle(\'msr-open\');\n    });\n\n    filterPanel.addEventListener(\'click\', function(e){\n      e.stopPropagation();\n    });\n\n    document.addEventListener(\'click\', function(e){\n      if(!e.target.closest(\'.filter-anchor\')){\n        filterPanel.classList.remove(\'msr-open\');\n      }\n    });\n\n    window.addEventListener(\'resize\', function(){\n  if(filterPanel.classList.contains(\'msr-open\')){\n    positionPanel();\n  }\n});\n\nwindow.addEventListener(\'scroll\', function(){\n  if(filterPanel.classList.contains(\'msr-open\')){\n    positionPanel();\n  }\n}, true);\n\n    document.querySelectorAll(\'.msr-type-pill\').forEach(function(btn){\n      btn.addEventListener(\'click\', function(){\n        document.querySelectorAll(\'.msr-type-pill\').forEach(function(b){ b.classList.remove(\'active\'); });\n        btn.classList.add(\'active\');\n        F.mediaType = btn.getAttribute(\'data-type\') || \'all\';\n      });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortTime\"]\').forEach(function(r){\n      r.addEventListener(\'change\', function(){ F.sortTime = this.value; });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortSize\"]\').forEach(function(r){\n      r.addEventListener(\'change\', function(){ F.sortSize = this.value; });\n    });\n\n    document.querySelectorAll(\'input[name=\"sortName\"]\').forEach(function(r){\n      r.addEventListener(\'change\', function(){ F.sortName = this.value; });\n    });\n\n    document.querySelectorAll(\'.msr-time-tab\').forEach(function(tab){\n      tab.addEventListener(\'click\', function(){\n        document.querySelectorAll(\'.msr-time-tab\').forEach(function(t){ t.classList.remove(\'active\'); });\n        document.querySelectorAll(\'.msr-time-pane\').forEach(function(p){ p.classList.remove(\'active\'); });\n        tab.classList.add(\'active\');\n        var pane = tab.getAttribute(\'data-pane\');\n        F.timeMode = pane;\n        var targetPane = document.getElementById(\'msrPane\' + pane);\n        if(targetPane) targetPane.classList.add(\'active\');\n      });\n    });\n\n    var applyBtn = document.getElementById(\'msrApplyFilter\');\n    if(applyBtn){\n      applyBtn.addEventListener(\'click\', function(e){\n        e.stopPropagation();\n        syncRangeInputs();\n        applyFilter();\n        filterPanel.classList.remove(\'msr-open\');\n      });\n    }\n\n    updateSizeUI();\n    updateDurUI();\n    renderViewer(MEDIA[0]);\n    renderStrip(getFilteredList());\n    renderRecently();\n  }\n\n  boot();\n});\n</script>\n<?php\n}, 999);','','global',0,10,-1,'2026-03-16 10:28:02',1,NULL),
(42,'WW - Layer Bar - API - 20260316','','add_filter(\'the_content\', function ($content) {\n\n  if (!is_page([\'ww-04-07-api\'))return $content;\n\n  ob_start(); ?>\n\n  <style>\n    html, body {\n      background: linear-gradient(180deg, #f5f8ff 0%, #eef3fb 40%, #e9eff8 100%) !important;\n    }\n\n    html, body {\n      height: 100%;\n      margin: 0;\n      overflow: hidden;\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    }\n\n    .ms-app {\n      display: flex;\n      height: 96vh;\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 28px;\n      gap: 28px;\n      box-sizing: border-box;\n    }\n\n    .ms-side {\n      width: 240px;\n      min-width: 240px;\n      flex-shrink: 0;\n      background: #fff;\n      border-radius: 18px;\n      padding: 18px 14px;\n      box-shadow: 0 4px 18px rgba(0,0,0,0.05);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .gs-logo {\n      font-size: 15px;\n      font-weight: 600;\n      color: #202124;\n      padding: 8px 12px 16px 12px;\n    }\n\n    .gs-nav {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .gs-nav a {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 10px;\n      text-decoration: none;\n      color: #3c4043;\n      font-weight: 500;\n      transition: .15s ease;\n    }\n\n    .gs-nav a:hover {\n      background: #f1f3f4;\n    }\n\n    .gs-nav a.active {\n      background: #e8f0fe;\n      color: #1967d2;\n      font-weight: 600;\n    }\n\n    .gs-divider {\n      height: 1px;\n      background: #eee;\n      margin: 14px 8px;\n    }\n\n    .ms-main {\n      flex: 1;\n      min-width: 0;\n      background: transparent;\n      border-radius: 0;\n      padding: 36px 42px;\n      box-shadow: none;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n\n    /* ===== Search History ===== */\n    .ms-history-item {\n      padding: 8px 10px;\n      border-radius: 8px;\n      font-size: 12px;\n      color: #3c4043;\n      cursor: pointer;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .ms-history-item:hover {\n      background: #f1f3f4;\n    }\n\n    .ms-history-item.active {\n      background: #e8f0fe;\n      color: #1967d2;\n      font-weight: 600;\n    }\n\n    .ms-history-title {\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      flex: 1;\n    }\n\n    .ms-history-menu {\n      font-size: 14px;\n      color: #999;\n      margin-left: 6px;\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .ms-menu-item {\n      padding: 10px 16px;\n      cursor: pointer;\n    }\n\n    .ms-menu-item:hover {\n      background: #f5f6f8;\n    }\n\n    .ms-menu-item[data-action=\"delete\"] {\n      color: #d93025;\n      font-weight: 600;\n    }\n\n    /* ===== 使用者區塊 ===== */\n    .gs-user {\n      margin-top: auto;\n      padding: 10px 12px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      background: #f8f9fa;\n      cursor: pointer;\n      position: relative;\n    }\n\n    .gs-avatar {\n      width: 34px;\n      height: 34px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n    }\n\n    .gs-user-info {\n      font-size: 12px;\n      line-height: 1.2;\n      min-width: 0;\n    }\n\n    .gs-user-name {\n      font-size: 13px;\n      font-weight: 600;\n      color: #202124;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .gs-user-plan {\n      font-size: 11px;\n      color: #5f6368;\n    }\n\n    /* ===== 帳戶下拉選單 ===== */\n    .gs-user-menu {\n      display: none;\n      position: absolute;\n      bottom: 54px;\n      left: 0;\n      width: 260px;\n      background: #fff;\n      border-radius: 18px;\n      box-shadow: 0 12px 40px rgba(0,0,0,.15);\n      border: 1px solid #e6e8eb;\n      padding: 10px 0;\n      z-index: 999;\n    }\n\n    .gs-user-menu.show {\n      display: block;\n    }\n\n    .gs-user-card {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n    }\n\n    .gs-avatar-lg {\n      width: 42px;\n      height: 42px;\n      border-radius: 50%;\n      object-fit: cover;\n      flex-shrink: 0;\n    }\n\n    .gs-user-card-name {\n      font-weight: 600;\n      font-size: 15px;\n      color: #202124;\n    }\n\n    .gs-user-handle {\n      font-size: 13px;\n      color: #777;\n    }\n\n    .gs-menu-divider {\n      height: 1px;\n      background: #eee;\n      margin: 8px 0;\n    }\n\n    .gs-menu-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 18px;\n      text-decoration: none;\n      color: #222;\n      font-size: 14px;\n    }\n\n    .gs-menu-item:hover {\n      background: #f3f4f6;\n    }\n\n    .gs-menu-item.logout {\n      color: #c62828;\n    }\n\n    /* 外框 */\n    .site,\n    .site-content,\n    .content-area {\n      background: transparent !important;\n      border-radius: 28px !important;\n      overflow: hidden;\n      box-shadow: 0 25px 70px rgba(0,0,0,.06);\n    }\n  </style>\n\n  <script>\n    document.addEventListener(\"DOMContentLoaded\", async function () {\n\n      /* ===== 使用者頭像 / 帳號區塊下拉選單 ===== */\n      const avatarBtn = document.getElementById(\"gsAvatarBtn\");\n      const userMenu = document.getElementById(\"gsUserMenu\");\n\n      if (avatarBtn && userMenu) {\n        avatarBtn.addEventListener(\"click\", function (e) {\n          e.stopPropagation();\n          userMenu.classList.toggle(\"show\");\n        });\n\n        document.addEventListener(\"click\", function (e) {\n          if (!e.target.closest(\".gs-user\")) {\n            userMenu.classList.remove(\"show\");\n          }\n        });\n      }\n\n      /* ===== 如果沒有 REST 設定，就只保留頭像下拉，不執行歷史功能 ===== */\n      if (typeof window.MS_REST === \"undefined\") {\n        return;\n      }\n\n      async function msLoadHistory() {\n        try {\n          const res = await fetch(window.MS_REST.root + \"momentry/v1/search-history\", {\n            headers: { \"X-WP-Nonce\": window.MS_REST.nonce }\n          });\n          const json = await res.json();\n          return json.ok ? json.data : [];\n        } catch (err) {\n          console.error(\"Load history failed:\", err);\n          return [];\n        }\n      }\n\n      function msRenderHistory(items) {\n        const list = document.getElementById(\"msHistoryList\");\n        if (!list) return;\n\n        if (!items.length) {\n          list.innerHTML = \'<div style=\"font-size:12px;color:#999;padding:6px 12px;\">No history yet</div>\';\n          return;\n        }\n\n        list.innerHTML = items.map(it => `\n          <div class=\"ms-history-item\" data-id=\"${it.id}\">\n            <span class=\"ms-history-title\">${it.query}</span>\n            <span class=\"ms-history-menu\">⋯</span>\n          </div>\n        `).join(\'\');\n      }\n\n      function createHistoryMenu(x, y, id) {\n        const old = document.getElementById(\"msHistoryDropdown\");\n        if (old) old.remove();\n\n        const menu = document.createElement(\"div\");\n        menu.id = \"msHistoryDropdown\";\n        menu.style.position = \"fixed\";\n        menu.style.top = y + \"px\";\n        menu.style.left = x + \"px\";\n        menu.style.background = \"#fff\";\n        menu.style.borderRadius = \"14px\";\n        menu.style.boxShadow = \"0 10px 30px rgba(0,0,0,.15)\";\n        menu.style.padding = \"8px 0\";\n        menu.style.width = \"180px\";\n        menu.style.zIndex = \"9999\";\n        menu.style.fontSize = \"14px\";\n\n        menu.innerHTML = `\n          <div class=\"ms-menu-item\" data-action=\"delete\">🗑 Delete</div>\n        `;\n\n        document.body.appendChild(menu);\n\n        setTimeout(() => {\n          document.addEventListener(\"click\", () => menu.remove(), { once: true });\n        }, 10);\n\n        menu.addEventListener(\"click\", async (e) => {\n          const action = e.target.dataset.action;\n\n          if (action === \"delete\") {\n            try {\n              await fetch(window.MS_REST.root + \"momentry/v1/delete-thread/\" + id, {\n                method: \"DELETE\",\n                headers: { \"X-WP-Nonce\": window.MS_REST.nonce }\n              });\n\n              document.querySelector(\'.ms-history-item[data-id=\"\' + id + \'\"]\')?.remove();\n\n              const chatBox = document.getElementById(\"chatMessages\");\n              if (chatBox) chatBox.innerHTML = \"\";\n\n              window.currentThreadId = null;\n              menu.remove();\n            } catch (err) {\n              console.error(\"Delete thread failed:\", err);\n            }\n          }\n        });\n      }\n\n      document.addEventListener(\"click\", async function (e) {\n        const menuBtn = e.target.closest(\".ms-history-menu\");\n        if (menuBtn) {\n          e.stopPropagation();\n          const item = menuBtn.closest(\".ms-history-item\");\n          if (!item) return;\n\n          const id = item.dataset.id;\n          const rect = menuBtn.getBoundingClientRect();\n          createHistoryMenu(rect.left - 140, rect.bottom + 6, id);\n          return;\n        }\n\n        const item = e.target.closest(\".ms-history-item\");\n        if (!item) return;\n\n        document.querySelectorAll(\".ms-history-item\").forEach(i => i.classList.remove(\"active\"));\n        item.classList.add(\"active\");\n\n        const id = item.dataset.id;\n\n        try {\n          const res = await fetch(window.MS_REST.root + \"momentry/v1/search-thread/\" + id, {\n            headers: { \"X-WP-Nonce\": window.MS_REST.nonce }\n          });\n          const json = await res.json();\n          if (!json.ok) return;\n\n          const box = document.getElementById(\"chatMessages\");\n          if (!box) return;\n\n          box.innerHTML = \"\";\n\n          (json.data.messages || []).forEach(m => {\n            box.innerHTML += `<div class=\"msg-user\">${m.query}</div>`;\n            box.innerHTML += `<div class=\"msg-ai\">${m.answer || \"No answer\"}</div>`;\n          });\n\n          box.scrollTop = box.scrollHeight;\n          window.currentThreadId = parseInt(id, 10);\n        } catch (err) {\n          console.error(\"Load thread failed:\", err);\n        }\n      });\n\n      document.getElementById(\"msNewChat\")?.addEventListener(\"click\", function () {\n        window.currentThreadId = null;\n\n        const chatBox = document.getElementById(\"chatMessages\");\n        if (chatBox) chatBox.innerHTML = \"\";\n\n        document.querySelectorAll(\".ms-history-item\").forEach(i => i.classList.remove(\"active\"));\n      });\n\n      const history = await msLoadHistory();\n      msRenderHistory(history);\n\n    });\n  </script>\n\n  <div class=\"ms-app\">\n\n    <aside class=\"ms-side\">\n\n      <div class=\"gs-logo\">Momentry Studio</div>\n\n      <div class=\"gs-nav\">\n        <a href=\"/lt-searching/\" class=\"<?php echo is_page(\'lt-searching\') ? \'active\' : \'\'; ?>\">🏠 Home</a>\n      </div>\n\n      <div class=\"gs-divider\"></div>\n\n      <div style=\"display:flex;justify-content:space-between;align-items:center;padding:0 10px 6px;\">\n        <span style=\"font-size:11px;color:#9aa0a6;text-transform:uppercase;\">Search History</span>\n        <span id=\"msNewChat\" style=\"font-size:12px;color:#1967d2;cursor:pointer;\">＋ New</span>\n      </div>\n\n      <div id=\"msHistoryList\" style=\"display:flex;flex-direction:column;gap:4px;padding:0 6px 6px 6px;\"></div>\n\n      <?php if (is_user_logged_in()) :\n        $u = wp_get_current_user();\n        $avatar = get_avatar_url($u->ID, [\'size\' => 96]); ?>\n\n        <div class=\"gs-user\" id=\"gsAvatarBtn\">\n          <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar\" alt=\"avatar\" />\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\"><?php echo esc_html($u->display_name); ?></div>\n            <div class=\"gs-user-plan\">\n              <?php\n                if (in_array(\'administrator\', $u->roles)) echo \'Admin\';\n                elseif (in_array(\'editor\', $u->roles)) echo \'Editor\';\n                elseif (in_array(\'subscriber\', $u->roles)) echo \'Member\';\n                else echo \'User\';\n              ?>\n            </div>\n          </div>\n\n          <div class=\"gs-user-menu\" id=\"gsUserMenu\">\n            <div class=\"gs-user-card\">\n              <img src=\"<?php echo esc_url($avatar); ?>\" class=\"gs-avatar-lg\" alt=\"avatar large\" />\n              <div>\n                <div class=\"gs-user-card-name\"><?php echo esc_html($u->display_name); ?></div>\n                <div class=\"gs-user-handle\">@<?php echo esc_html($u->user_login); ?></div>\n              </div>\n            </div>\n\n            <div class=\"gs-menu-divider\"></div>\n\n            <a href=\"lt-upgrade-plan\" class=\"gs-menu-item\">⭐ Upgrade plan</a>\n            <a href=\"/lt-🎨-personalization/\" class=\"gs-menu-item\">🎨 Personalization</a>\n            <a href=\"/lt-settings/\" class=\"gs-menu-item\">⚙ Settings</a>\n\n           <div class=\"gs-menu-divider\"></div>\n\n\n<a href=\"/lt-help/\" class=\"gs-menu-item\">❓ Help</a>\n<a href=\"<?php echo esc_url(wp_logout_url(wp_login_url(home_url(\'/lt-searching/\')))); ?>\" class=\"gs-menu-item\">🔄 Switch account</a>\n<a href=\"<?php echo esc_url(wp_logout_url(home_url(\'/lt-searching/\'))); ?>\" class=\"gs-menu-item logout\">🚪 Log out</a>\n          </div>\n        </div>\n\n      <?php else : ?>\n\n        <a href=\"<?php echo esc_url(wp_login_url(home_url(\'/lt-searching\'))); ?>\" class=\"gs-user\">\n          <div class=\"gs-avatar\">👤</div>\n          <div class=\"gs-user-info\">\n            <div class=\"gs-user-name\">Sign in to Momentry</div>\n            <div class=\"gs-user-plan\">Access your AI workspace</div>\n          </div>\n        </a>\n\n      <?php endif; ?>\n\n    </aside>\n\n    <main class=\"ms-main\">\n      <?php echo $content; ?>\n    </main>\n\n  </div>\n\n  <?php\n  return ob_get_clean();\n\n}, 99);','','global',0,10,-1,'2026-03-16 11:43:31',1,NULL),
(43,'momentry-video - UUID 用','','\n\n/**\n * Momentry Video + Thumbnail Proxy\n * 1. ?momentry_video=1&uuid=xxx  -> 播放影片\n * 2. ?momentry_thumb=1&uuid=xxx&t=1542.64 -> 取指定秒數縮圖\n */\n\nif (!defined(\'MOMENTRY_API_BASE\')) {\n    define(\'MOMENTRY_API_BASE\', \'http://192.168.110.201:3002\');\n}\n\nif (!defined(\'MOMENTRY_API_KEY\')) {\n    define(\'MOMENTRY_API_KEY\', \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\');\n}\n\nif (!defined(\'MOMENTRY_FFMPEG_PATH\')) {\n    // Apple Silicon 常見路徑\n    define(\'MOMENTRY_FFMPEG_PATH\', \'/opt/homebrew/bin/ffmpeg\');\n}\n\nadd_action(\'init\', function () {\n    if (isset($_GET[\'momentry_video\'])) {\n        momentry_output_video();\n    }\n\n    if (isset($_GET[\'momentry_thumb\'])) {\n        momentry_output_thumb();\n    }\n});\n\nfunction momentry_parse_http_range($range_header, $size) {\n    if (!$range_header || $size <= 0) {\n        return null;\n    }\n\n    if (!preg_match(\'/bytes=([0-9]*)-([0-9]*)/i\', $range_header, $m)) {\n        return null;\n    }\n\n    $start_raw = $m[1];\n    $end_raw   = $m[2];\n\n    // bytes=START-END\n    if ($start_raw !== \'\') {\n        $start = (int) $start_raw;\n        $end   = ($end_raw === \'\') ? ($size - 1) : (int) $end_raw;\n        return [$start, $end];\n    }\n\n    // bytes=-SUFFIX (last N bytes)\n    if ($end_raw !== \'\') {\n        $suffix = (int) $end_raw;\n        if ($suffix <= 0) {\n            return null;\n        }\n\n        $start = max(0, $size - $suffix);\n        $end   = $size - 1;\n        return [$start, $end];\n    }\n\n    return null;\n}\n\nfunction momentry_lookup_video($uuid) {\n    $cache_key = \'momentry_lookup_\' . md5($uuid);\n    $cached = get_transient($cache_key);\n    if (is_array($cached) && !empty($cached[\'file_path\'])) {\n        return $cached;\n    }\n\n    $lookup_url = MOMENTRY_API_BASE . \'/api/v1/lookup?uuid=\' . rawurlencode($uuid);\n\n    $response = wp_remote_get($lookup_url, [\n        \'timeout\' => 20,\n        \'headers\' => [\n            \'Accept\'    => \'application/json\',\n            \'X-API-Key\' => MOMENTRY_API_KEY,\n        ],\n    ]);\n\n    if (is_wp_error($response)) {\n        return new WP_Error(\'lookup_failed\', $response->get_error_message());\n    }\n\n    $status = wp_remote_retrieve_response_code($response);\n    $body   = wp_remote_retrieve_body($response);\n    $data   = json_decode($body, true);\n\n    if ($status !== 200 || !is_array($data) || empty($data[\'file_path\'])) {\n        return new WP_Error(\'lookup_invalid\', \'Lookup failed. HTTP=\' . $status);\n    }\n\n    // Short cache to reduce API round-trips during scrubbing/seek.\n    set_transient($cache_key, $data, 60);\n    return $data;\n}\n\nfunction momentry_validate_path($path) {\n    $allowed_roots = [\n        \'/Users/accusys/test_video/\',\n        \'/Users/accusys/momentry/var/sftpgo/data/demo/\',\n    ];\n\n    if (!$path || !file_exists($path)) {\n        return false;\n    }\n\n    $real = realpath($path);\n    if ($real === false) {\n        return false;\n    }\n\n    foreach ($allowed_roots as $root) {\n        $root_real = realpath($root);\n        if ($root_real !== false && strpos($real, $root_real) === 0) {\n            return $real;\n        }\n    }\n\n    return false;\n}\n\nfunction momentry_detect_mime($path) {\n    $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));\n    $mime_map = [\n        \'mp4\'  => \'video/mp4\',\n        \'m4v\'  => \'video/x-m4v\',\n        \'mov\'  => \'video/quicktime\',\n        \'webm\' => \'video/webm\',\n    ];\n\n    return isset($mime_map[$ext]) ? $mime_map[$ext] : \'application/octet-stream\';\n}\n\nfunction momentry_output_video() {\n    $uuid = isset($_GET[\'uuid\']) ? sanitize_text_field($_GET[\'uuid\']) : \'\';\n    if ($uuid === \'\') {\n        status_header(400);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Missing uuid\';\n        exit;\n    }\n\n    // Avoid any extra output that can break streaming.\n    if (function_exists(\'wp_ob_end_flush_all\')) {\n        wp_ob_end_flush_all();\n    } else {\n        while (ob_get_level() > 0) {\n            ob_end_flush();\n        }\n    }\n\n    $lookup = momentry_lookup_video($uuid);\n    if (is_wp_error($lookup)) {\n        status_header(502);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Lookup failed: \' . $lookup->get_error_message();\n        exit;\n    }\n\n    $resolved_path = momentry_validate_path($lookup[\'file_path\']);\n    if (!$resolved_path) {\n        status_header(404);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Video file not found or not allowed\';\n        exit;\n    }\n\n    $size = filesize($resolved_path);\n    $mime = momentry_detect_mime($resolved_path);\n\n    header(\'Content-Type: \' . $mime);\n    header(\'Accept-Ranges: bytes\');\n    header(\'Cache-Control: public, max-age=3600\');\n\n    $range = isset($_SERVER[\'HTTP_RANGE\']) ? $_SERVER[\'HTTP_RANGE\'] : null;\n\n    $parsed_range = momentry_parse_http_range($range, $size);\n    if ($parsed_range) {\n        [$start, $end] = $parsed_range;\n\n        if ($start > $end || $end >= $size) {\n            header(\'HTTP/1.1 416 Range Not Satisfiable\');\n            header(\"Content-Range: bytes */{$size}\");\n            exit;\n        }\n\n        $length = $end - $start + 1;\n\n        header(\'HTTP/1.1 206 Partial Content\');\n        header(\"Content-Length: {$length}\");\n        header(\"Content-Range: bytes {$start}-{$end}/{$size}\");\n\n        $fp = fopen($resolved_path, \'rb\');\n        if ($fp === false) {\n            status_header(500);\n            header(\'Content-Type: text/plain; charset=utf-8\');\n            echo \'Failed to open video file\';\n            exit;\n        }\n        fseek($fp, $start);\n\n        // Turn off buffering/compression to improve streaming throughput.\n        @ini_set(\'output_buffering\', \'off\');\n        @ini_set(\'zlib.output_compression\', \'0\');\n        set_time_limit(0);\n\n        $out = fopen(\'php://output\', \'wb\');\n        if ($out === false) {\n            fclose($fp);\n            status_header(500);\n            header(\'Content-Type: text/plain; charset=utf-8\');\n            echo \'Failed to open output stream\';\n            exit;\n        }\n\n        // stream_copy_to_stream is implemented in C and typically faster than\n        // echo+fread loops with flush().\n        stream_copy_to_stream($fp, $out, $length);\n        fclose($out);\n        fclose($fp);\n\n        exit;\n    }\n\n    header(\'Content-Length: \' . $size);\n    readfile($resolved_path);\n    exit;\n}\n\nfunction momentry_output_thumb() {\n    $uuid = isset($_GET[\'uuid\']) ? sanitize_text_field($_GET[\'uuid\']) : \'\';\n    $time = isset($_GET[\'t\']) ? floatval($_GET[\'t\']) : 0;\n    $debug_mode = isset($_GET[\'debug\']) && $_GET[\'debug\'] === \'1\';\n\n    if ($uuid === \'\') {\n        status_header(400);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Missing uuid\';\n        exit;\n    }\n\n    $lookup = momentry_lookup_video($uuid);\n    if (is_wp_error($lookup)) {\n        status_header(502);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Lookup failed: \' . $lookup->get_error_message();\n        exit;\n    }\n\n    $video_path = momentry_validate_path($lookup[\'file_path\']);\n    if (!$video_path) {\n        status_header(404);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'Video file not found or not allowed\';\n        exit;\n    }\n\n    $ffmpeg = MOMENTRY_FFMPEG_PATH;\n    if (!file_exists($ffmpeg)) {\n        // Intel Mac 常見路徑\n        $ffmpeg = \'/usr/local/bin/ffmpeg\';\n    }\n\n    if (!file_exists($ffmpeg)) {\n        status_header(500);\n        header(\'Content-Type: text/plain; charset=utf-8\');\n        echo \'ffmpeg not found\';\n        exit;\n    }\n\n    $upload = wp_upload_dir();\n    $cache_dir = $upload[\'basedir\'] . \'/momentry-thumbs\';\n\n    if (!file_exists($cache_dir)) {\n        wp_mkdir_p($cache_dir);\n    }\n\n    $safe_time = max(0, $time);\n    // Thumbnails 不需要精確到小數點後多位，時間越精細代表越難命中快取。\n    // 統一成整秒可大幅降低 ffmpeg 重複生成的機率。\n    $time_key = (string) (int) floor($safe_time);\n    $thumb_key = md5($uuid . \'_\' . $time_key);\n    $thumb_file = $cache_dir . \'/\' . $thumb_key . \'.jpg\';\n    $lock_file = $cache_dir . \'/\' . $thumb_key . \'.lock\';\n\n    $is_hit_before = file_exists($thumb_file);\n\n    if (!$is_hit_before) {\n        // Prevent thundering herd: only one generator per uuid+t.\n        $lock_fp = fopen($lock_file, \'c\');\n        if ($lock_fp !== false) {\n            flock($lock_fp, LOCK_EX);\n        }\n\n        // Re-check after acquiring lock.\n        if (!file_exists($thumb_file)) {\n            $cmd = escapeshellarg($ffmpeg)\n                . \' -hide_banner -loglevel error -nostdin\'\n                . \' -an -sn -dn\'\n                . \' -ss \' . escapeshellarg($time_key)\n                . \' -noaccurate_seek\'\n                . \' -i \' . escapeshellarg($video_path)\n                . \' -frames:v 1 -q:v 5 -vf scale=640:-1\'\n                . \' -y \' . escapeshellarg($thumb_file)\n                . \' 2>&1\';\n\n            exec($cmd, $output, $ret);\n\n            if ($ret !== 0 || !file_exists($thumb_file)) {\n                if ($lock_fp !== false) {\n                    flock($lock_fp, LOCK_UN);\n                    fclose($lock_fp);\n                }\n                status_header(500);\n                header(\'Content-Type: text/plain; charset=utf-8\');\n                echo \'thumbnail generation failed\';\n                exit;\n            }\n        }\n\n        if ($lock_fp !== false) {\n            flock($lock_fp, LOCK_UN);\n            fclose($lock_fp);\n        }\n    }\n\n    $is_hit_after = file_exists($thumb_file);\n\n    if ($debug_mode) {\n        header(\'Content-Type: application/json; charset=utf-8\');\n        echo json_encode([\n            \'uuid\' => $uuid,\n            \'t_input\' => $time,\n            \'time_key\' => $time_key,\n            \'thumb_status_before\' => $is_hit_before ? \'HIT\' : \'MISS\',\n            \'thumb_status_after\' => $is_hit_after ? \'HIT\' : \'MISS\',\n            \'thumb_file_exists_before\' => $is_hit_before,\n            \'thumb_file_exists_after\' => $is_hit_after,\n            \'thumb_file\' => basename($thumb_file),\n        ], JSON_UNESCAPED_SLASHES);\n        exit;\n    }\n\n    header(\'Content-Type: image/jpeg\');\n    header(\'Cache-Control: public, max-age=86400\');\n    header(\'Content-Length: \' . filesize($thumb_file));\n    readfile($thumb_file);\n    exit;\n}','','global',0,10,-1,'2026-03-26 12:42:23',1,NULL),
(44,'functions','','\n/**\n * Momentry Identity Manager AJAX Proxy\n * functions.php\n */\n\n/**\n * Source mode\n * person_list = 目前沿用 person-list\n * identity_candidates = 未來改成真實 identity-candidates\n */\nif (!defined(\'MOMENTRY_CORE_API_BASE\')) {\n  define(\'MOMENTRY_CORE_API_BASE\', \'http://192.168.110.201:3002\');\n}\n\nif (!defined(\'MOMENTRY_CORE_API_KEY\')) {\n  define(\'MOMENTRY_CORE_API_KEY\', \'muser_68600856036340bcafc01930eb4bd839\');\n}\n\nif (!defined(\'MOMENTRY_PEOPLE_SOURCE_MODE\')) {\n  define(\'MOMENTRY_PEOPLE_SOURCE_MODE\', \'person_list\');\n}\n\nif (!defined(\'MOMENTRY_PERSON_LIST_URL\')) {\n  define(\'MOMENTRY_PERSON_LIST_URL\', \'https://n8n.momentry.ddns.net/webhook/person-list\');\n}\n\nif (!defined(\'MOMENTRY_PERSON_LIST_MODE\')) {\n  define(\'MOMENTRY_PERSON_LIST_MODE\', \'mock\');\n}\n\nif (!defined(\'MOMENTRY_IDENTITY_CANDIDATES_URL\')) {\n  define(\'MOMENTRY_IDENTITY_CANDIDATES_URL\', \'https://n8n.momentry.ddns.net/webhook/identity-candidates\');\n}\n\nif (!defined(\'MOMENTRY_IDENTITY_LABEL_URL\')) {\n  define(\'MOMENTRY_IDENTITY_LABEL_URL\', \'https://n8n.momentry.ddns.net/webhook/identity-label\');\n}\n\nif (!defined(\'MOMENTRY_IDENTITY_MERGE_URL\')) {\n  define(\'MOMENTRY_IDENTITY_MERGE_URL\', \'https://n8n.momentry.ddns.net/webhook/identity-merge\');\n}\n\nif (!defined(\'MOMENTRY_IDENTITY_RESOLVE_URL\')) {\n  define(\'MOMENTRY_IDENTITY_RESOLVE_URL\', \'https://n8n.momentry.ddns.net/webhook/identity-search-resolve\');\n}\n\nif (!defined(\'MOMENTRY_SEARCH_URL\')) {\n  define(\'MOMENTRY_SEARCH_URL\', \'https://n8n.momentry.ddns.net/webhook/search\');\n}\n\nif (!defined(\'MOMENTRY_DEFAULT_VIDEO_UUID\')) {\n  define(\'MOMENTRY_DEFAULT_VIDEO_UUID\', \'384b0ff44aaaa1f1\');\n}\n\n/**\n * Generic POST proxy for n8n endpoints\n */\nif (!function_exists(\'momentry_identity_proxy_post\')) {\n  function momentry_identity_proxy_post($url, $payload = array()) {\n    $args = array(\n      \'timeout\' => 20,\n      \'headers\' => array(\n        \'Content-Type\' => \'application/json; charset=utf-8\',\n      ),\n      \'body\' => wp_json_encode($payload),\n    );\n\n    $response = wp_remote_post($url, $args);\n\n    if (is_wp_error($response)) {\n      return array(\n        \'ok\' => false,\n        \'status\' => 500,\n        \'body\' => array(\n          \'message\' => $response->get_error_message(),\n        ),\n      );\n    }\n\n    $status = wp_remote_retrieve_response_code($response);\n    $body_raw = wp_remote_retrieve_body($response);\n    $body = json_decode($body_raw, true);\n\n    if (!is_array($body)) {\n      $body = array(\n        \'raw\' => $body_raw,\n      );\n    }\n\n    return array(\n      \'ok\' => ($status >= 200 && $status < 300),\n      \'status\' => $status,\n      \'body\' => $body,\n    );\n  }\n}\n\n/**\n * Generic request for Core API\n */\nif (!function_exists(\'momentry_core_request\')) {\n  function momentry_core_request($method, $url, $payload = array()) {\n    $args = array(\n      \'method\'  => strtoupper($method),\n      \'timeout\' => 20,\n      \'headers\' => array(\n        \'Content-Type\' => \'application/json; charset=utf-8\',\n        \'X-API-Key\'    => MOMENTRY_CORE_API_KEY,\n      ),\n    );\n\n    if (!empty($payload)) {\n      $args[\'body\'] = wp_json_encode($payload);\n    }\n\n    $response = wp_remote_request($url, $args);\n\n    if (is_wp_error($response)) {\n      return array(\n        \'ok\' => false,\n        \'status\' => 500,\n        \'body\' => array(\n          \'message\' => $response->get_error_message(),\n        ),\n      );\n    }\n\n    $status = wp_remote_retrieve_response_code($response);\n    $body_raw = wp_remote_retrieve_body($response);\n    $body = json_decode($body_raw, true);\n\n    if (!is_array($body)) {\n      $body = array(\n        \'raw\' => $body_raw,\n      );\n    }\n\n    return array(\n      \'ok\' => ($status >= 200 && $status < 300),\n      \'status\' => $status,\n      \'body\' => $body,\n    );\n  }\n}\n\n/**\n * Normalize person-list result to frontend items\n */\nif (!function_exists(\'momentry_normalize_person_list_items\')) {\n  function momentry_normalize_person_list_items($items = array()) {\n    $normalized = array();\n\n    if (!is_array($items)) {\n      return $normalized;\n    }\n\n    foreach ($items as $index => $item) {\n      if (!is_array($item)) {\n        continue;\n      }\n\n      $video_uuid = \'\';\n      if (!empty($item[\'video_uuid\'])) {\n        $video_uuid = sanitize_text_field($item[\'video_uuid\']);\n      } elseif (!empty($item[\'sample_video_id\'])) {\n        $video_uuid = sanitize_text_field($item[\'sample_video_id\']);\n      } elseif (!empty($item[\'video_id\'])) {\n        $video_uuid = sanitize_text_field($item[\'video_id\']);\n      } else {\n        $video_uuid = MOMENTRY_DEFAULT_VIDEO_UUID;\n      }\n\n      $person_id = \'\';\n      if (!empty($item[\'person_id\'])) {\n        $person_id = sanitize_text_field($item[\'person_id\']);\n      } elseif (!empty($item[\'id\'])) {\n        $person_id = sanitize_text_field($item[\'id\']);\n      }\n\n      $candidate_id = \'\';\n      if ($video_uuid !== \'\' && $person_id !== \'\') {\n        $candidate_id = $video_uuid . \'__\' . $person_id;\n      } elseif (!empty($item[\'candidate_id\'])) {\n        $candidate_id = sanitize_text_field($item[\'candidate_id\']);\n      } elseif (!empty($item[\'identity_id\'])) {\n        $candidate_id = sanitize_text_field($item[\'identity_id\']);\n      } elseif (!empty($item[\'id\'])) {\n        $candidate_id = sanitize_text_field($item[\'id\']);\n      } else {\n        $candidate_id = \'cand_auto_\' . ($index + 1);\n      }\n\n      $display_name = \'\';\n      if (!empty($item[\'display_name\'])) {\n        $display_name = sanitize_text_field($item[\'display_name\']);\n      } elseif (!empty($item[\'name\'])) {\n        $display_name = sanitize_text_field($item[\'name\']);\n      } elseif (!empty($item[\'title\'])) {\n        $display_name = sanitize_text_field($item[\'title\']);\n      } elseif ($person_id !== \'\') {\n        $display_name = $person_id;\n      }\n\n      $preview_image = \'\';\n      if (!empty($item[\'preview_image\'])) {\n        $preview_image = esc_url_raw($item[\'preview_image\']);\n      } elseif (!empty($item[\'thumbnail\'])) {\n        $preview_image = esc_url_raw($item[\'thumbnail\']);\n      } elseif (!empty($item[\'thumb_url\'])) {\n        $preview_image = esc_url_raw($item[\'thumb_url\']);\n      }\n\n      $sample_video_id = \'\';\n      if (!empty($item[\'sample_video_id\'])) {\n        $sample_video_id = sanitize_text_field($item[\'sample_video_id\']);\n      } elseif (!empty($item[\'video_id\'])) {\n        $sample_video_id = sanitize_text_field($item[\'video_id\']);\n      } elseif ($video_uuid !== \'\') {\n        $sample_video_id = $video_uuid;\n      }\n\n      $sample_t_start = 0;\n      if (isset($item[\'sample_t_start\'])) {\n        $sample_t_start = floatval($item[\'sample_t_start\']);\n      } elseif (isset($item[\'t_start\'])) {\n        $sample_t_start = floatval($item[\'t_start\']);\n      }\n\n      if ($preview_image === \'\' && $sample_video_id !== \'\') {\n        $preview_image = home_url(\'/?momentry_thumb=1&uuid=\' . rawurlencode($sample_video_id) . \'&t=\' . rawurlencode($sample_t_start));\n      }\n\n      $normalized[] = array(\n        \'candidate_id\'       => $candidate_id,\n        \'video_uuid\'         => $video_uuid,\n        \'person_id\'          => $person_id,\n        \'display_name\'       => $display_name,\n        \'preview_image\'      => $preview_image,\n        \'count\'              => isset($item[\'count\']) ? intval($item[\'count\']) : (isset($item[\'appearances\']) ? intval($item[\'appearances\']) : 0),\n        \'source_type\'        => !empty($item[\'source_type\']) ? sanitize_text_field($item[\'source_type\']) : \'person\',\n        \'face_cluster_id\'    => !empty($item[\'face_cluster_id\']) ? sanitize_text_field($item[\'face_cluster_id\']) : \'\',\n        \'speaker_cluster_id\' => !empty($item[\'speaker_cluster_id\']) ? sanitize_text_field($item[\'speaker_cluster_id\']) : \'\',\n        \'last_seen\'          => !empty($item[\'last_seen\']) ? sanitize_text_field($item[\'last_seen\']) : \'\',\n        \'sample_video_id\'    => $sample_video_id,\n        \'sample_t_start\'     => $sample_t_start,\n      );\n    }\n\n    return $normalized;\n  }\n}\n\n/**\n * Load candidates / people\n */\nfunction momentry_ajax_identity_candidates() {\n  $query = isset($_POST[\'query\']) ? sanitize_text_field(wp_unslash($_POST[\'query\'])) : \'\';\n  $limit = isset($_POST[\'limit\']) ? intval($_POST[\'limit\']) : 30;\n\nif (MOMENTRY_PEOPLE_SOURCE_MODE === \'person_list\') {\n  $result = momentry_identity_proxy_post(\n    MOMENTRY_PERSON_LIST_URL,\n    array(\n      \'query\'      => $query,\n      \'limit\'      => $limit > 0 ? $limit : 30,\n      \'mode\'       => MOMENTRY_PERSON_LIST_MODE,\n      \'video_uuid\' => MOMENTRY_DEFAULT_VIDEO_UUID,\n    )\n  );\n\n    if (!$result[\'ok\']) {\n      wp_send_json_error(array(\n        \'message\' => \'Failed to load people from person-list\',\n        \'detail\'  => $result[\'body\'],\n        \'status\'  => $result[\'status\'],\n      ), $result[\'status\']);\n    }\n\n    $body = $result[\'body\'];\n    $items = array();\n\n    if (!empty($body[\'items\']) && is_array($body[\'items\'])) {\n      $items = $body[\'items\'];\n    } elseif (!empty($body[\'results\']) && is_array($body[\'results\'])) {\n      $items = $body[\'results\'];\n    } elseif (is_array($body)) {\n      $items = $body;\n    }\n\n    $items = momentry_normalize_person_list_items($items);\n\n    wp_send_json_success(array(\n      \'query\'       => $query,\n      \'total\'       => count($items),\n      \'items\'       => $items,\n      \'source_mode\' => \'person_list\',\n    ));\n  }\n\n  $result = momentry_identity_proxy_post(\n    MOMENTRY_IDENTITY_CANDIDATES_URL,\n    array(\n      \'query\' => $query,\n      \'limit\' => $limit > 0 ? $limit : 30,\n    )\n  );\n\n  if (!$result[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to load people from identity-candidates\',\n      \'detail\'  => $result[\'body\'],\n      \'status\'  => $result[\'status\'],\n    ), $result[\'status\']);\n  }\n\n  $body = $result[\'body\'];\n\n  wp_send_json_success(array(\n    \'query\'       => isset($body[\'query\']) ? $body[\'query\'] : $query,\n    \'total\'       => isset($body[\'total\']) ? intval($body[\'total\']) : 0,\n    \'items\'       => isset($body[\'items\']) && is_array($body[\'items\']) ? $body[\'items\'] : array(),\n    \'source_mode\' => \'identity_candidates\',\n  ));\n}\nadd_action(\'wp_ajax_momentry_identity_candidates\', \'momentry_ajax_identity_candidates\');\nadd_action(\'wp_ajax_nopriv_momentry_identity_candidates\', \'momentry_ajax_identity_candidates\');\n\n/**\n * Rename person via Core PATCH\n */\nfunction momentry_ajax_person_rename() {\n  $video_uuid = isset($_POST[\'video_uuid\']) ? sanitize_text_field(wp_unslash($_POST[\'video_uuid\'])) : \'\';\n  $person_id  = isset($_POST[\'person_id\']) ? sanitize_text_field(wp_unslash($_POST[\'person_id\'])) : \'\';\n  $name       = isset($_POST[\'name\']) ? sanitize_text_field(wp_unslash($_POST[\'name\'])) : \'\';\n\n  if ($video_uuid === \'\' || $person_id === \'\') {\n    wp_send_json_error(array(\'message\' => \'video_uuid and person_id are required\'), 400);\n  }\n\n  $url = MOMENTRY_CORE_API_BASE . \'/api/v1/person/\' . rawurlencode($person_id) . \'?video_uuid=\' . rawurlencode($video_uuid);\n\n  $result = momentry_core_request(\'PATCH\', $url, array(\n    \'name\' => $name,\n  ));\n\n  if (!$result[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to rename person\',\n      \'detail\'  => $result[\'body\'],\n      \'status\'  => $result[\'status\'],\n    ), $result[\'status\']);\n  }\n\n  wp_send_json_success(array(\n    \'ok\'         => true,\n    \'video_uuid\' => $video_uuid,\n    \'person_id\'  => $person_id,\n    \'name\'       => $name,\n    \'response\'   => $result[\'body\'],\n  ));\n}\nadd_action(\'wp_ajax_momentry_person_rename\', \'momentry_ajax_person_rename\');\nadd_action(\'wp_ajax_nopriv_momentry_person_rename\', \'momentry_ajax_person_rename\');\n\n/**\n * Legacy label flow (保留，但正式 rename 已不走這條)\n */\nfunction momentry_ajax_identity_label() {\n  $candidate_id = isset($_POST[\'candidate_id\']) ? sanitize_text_field(wp_unslash($_POST[\'candidate_id\'])) : \'\';\n  $display_name = isset($_POST[\'display_name\']) ? sanitize_text_field(wp_unslash($_POST[\'display_name\'])) : \'\';\n\n  if ($candidate_id === \'\') {\n    wp_send_json_error(array(\'message\' => \'candidate_id is required\'), 400);\n  }\n\n  $result = momentry_identity_proxy_post(\n    MOMENTRY_IDENTITY_LABEL_URL,\n    array(\n      \'candidate_id\' => $candidate_id,\n      \'display_name\' => $display_name,\n    )\n  );\n\n  if (!$result[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to save label\',\n      \'detail\'  => $result[\'body\'],\n      \'status\'  => $result[\'status\'],\n    ), $result[\'status\']);\n  }\n\n  wp_send_json_success($result[\'body\']);\n}\nadd_action(\'wp_ajax_momentry_identity_label\', \'momentry_ajax_identity_label\');\nadd_action(\'wp_ajax_nopriv_momentry_identity_label\', \'momentry_ajax_identity_label\');\n\n/**\n * Merge\n */\nfunction momentry_ajax_identity_merge() {\n  $identity_name = isset($_POST[\'identity_name\']) ? sanitize_text_field(wp_unslash($_POST[\'identity_name\'])) : \'\';\n  $candidate_ids = isset($_POST[\'candidate_ids\']) ? (array) $_POST[\'candidate_ids\'] : array();\n\n  $candidate_ids = array_values(array_filter(array_map(\'sanitize_text_field\', $candidate_ids)));\n\n  if ($identity_name === \'\' || empty($candidate_ids)) {\n    wp_send_json_error(array(\'message\' => \'identity_name and candidate_ids are required\'), 400);\n  }\n\n  $result = momentry_identity_proxy_post(\n    MOMENTRY_IDENTITY_MERGE_URL,\n    array(\n      \'identity_name\' => $identity_name,\n      \'candidate_ids\' => $candidate_ids,\n    )\n  );\n\n  if (!$result[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to merge identities\',\n      \'detail\'  => $result[\'body\'],\n      \'status\'  => $result[\'status\'],\n    ), $result[\'status\']);\n  }\n\n  wp_send_json_success($result[\'body\']);\n}\nadd_action(\'wp_ajax_momentry_identity_merge\', \'momentry_ajax_identity_merge\');\nadd_action(\'wp_ajax_nopriv_momentry_identity_merge\', \'momentry_ajax_identity_merge\');\n\n/**\n * Resolve\n */\nfunction momentry_ajax_identity_resolve() {\n  $name = isset($_POST[\'name\']) ? sanitize_text_field(wp_unslash($_POST[\'name\'])) : \'\';\n\n  if ($name === \'\') {\n    wp_send_json_error(array(\'message\' => \'name is required\'), 400);\n  }\n\n  $result = momentry_identity_proxy_post(\n    MOMENTRY_IDENTITY_RESOLVE_URL,\n    array(\n      \'name\' => $name,\n    )\n  );\n\n  if (!$result[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to resolve identity\',\n      \'detail\'  => $result[\'body\'],\n      \'status\'  => $result[\'status\'],\n    ), $result[\'status\']);\n  }\n\n  wp_send_json_success($result[\'body\']);\n}\nadd_action(\'wp_ajax_momentry_identity_resolve\', \'momentry_ajax_identity_resolve\');\nadd_action(\'wp_ajax_nopriv_momentry_identity_resolve\', \'momentry_ajax_identity_resolve\');\n\n/**\n * Search moments by resolved identity\n */\nfunction momentry_ajax_identity_search() {\n  $name = isset($_POST[\'name\']) ? sanitize_text_field(wp_unslash($_POST[\'name\'])) : \'\';\n\n  if ($name === \'\') {\n    wp_send_json_error(array(\'message\' => \'name is required\'), 400);\n  }\n\n  $resolve = momentry_identity_proxy_post(\n    MOMENTRY_IDENTITY_RESOLVE_URL,\n    array(\n      \'name\' => $name,\n    )\n  );\n\n  if (!$resolve[\'ok\'] || empty($resolve[\'body\'][\'ok\'])) {\n    wp_send_json_error(array(\n      \'message\' => \'Identity not found\',\n      \'detail\'  => $resolve[\'body\'],\n    ), 404);\n  }\n\n  $resolved = $resolve[\'body\'];\n\n  $search = momentry_identity_proxy_post(\n    MOMENTRY_SEARCH_URL,\n    array(\n      \'query\' => \'\',\n      \'limit\' => 12,\n      \'filters\' => array(\n        \'identity_id\'         => isset($resolved[\'identity_id\']) ? $resolved[\'identity_id\'] : \'\',\n        \'candidate_ids\'       => isset($resolved[\'candidate_ids\']) ? $resolved[\'candidate_ids\'] : array(),\n        \'face_cluster_ids\'    => isset($resolved[\'face_cluster_ids\']) ? $resolved[\'face_cluster_ids\'] : array(),\n        \'speaker_cluster_ids\' => isset($resolved[\'speaker_cluster_ids\']) ? $resolved[\'speaker_cluster_ids\'] : array(),\n      ),\n    )\n  );\n\n  if (!$search[\'ok\']) {\n    wp_send_json_error(array(\n      \'message\' => \'Failed to search video moments\',\n      \'detail\'  => $search[\'body\'],\n      \'status\'  => $search[\'status\'],\n    ), $search[\'status\']);\n  }\n\n  wp_send_json_success(array(\n    \'resolve\' => $resolved,\n    \'search\'  => $search[\'body\'],\n  ));\n}\nadd_action(\'wp_ajax_momentry_identity_search\', \'momentry_ajax_identity_search\');\nadd_action(\'wp_ajax_nopriv_momentry_identity_search\', \'momentry_ajax_identity_search\');','who','global',0,10,-1,'2026-04-17 10:22:06',1,NULL),
(45,'Function-LT','','add_action(\'wp_footer\', function () {\n  if (!is_page(\'who-lt\')) return;\n  ?>\n  <script>\n  (function(){\n    \'use strict\';\n\n    var AJAX_URL = \'/wp-admin/admin-ajax.php\';\n\n    var rootEl = document.getElementById(\'msPeople\');\n    if (!rootEl) return;\n\n    var gridEl = document.getElementById(\'msPeopleGrid\');\n    var statEl = document.getElementById(\'msPeopleStat\');\n    var toastEl = document.getElementById(\'msPeopleToast\');\n\n    var peoplePaginationEl = document.getElementById(\'msPeoplePagination\');\n    var videoPaginationEl = document.getElementById(\'msVideoPagination\');\n\n    var modalEl = document.getElementById(\'msPeopleModal\');\n    var inputEl = document.getElementById(\'msPeopleInput\');\n    var cancelEl = document.getElementById(\'msPeopleCancel\');\n    var saveEl = document.getElementById(\'msPeopleSave\');\n    var thumbImgEl = document.getElementById(\'msPeopleThumbImg\');\n    var thumbNameEl = document.getElementById(\'msPeopleThumbName\');\n\n    var mergeModalEl = document.getElementById(\'msMergeModal\');\n    var mergeInputEl = document.getElementById(\'msMergeInput\');\n    var mergeCancelEl = document.getElementById(\'msMergeCancel\');\n    var mergeSaveEl = document.getElementById(\'msMergeSave\');\n    var mergeSelectedEl = document.getElementById(\'msMergeSelected\');\n\n    var clearBtnEl = document.getElementById(\'msPeopleClear\');\n    var mergeOpenBtnEl = document.getElementById(\'msPeopleMergeOpen\');\n    var backBtnEl = document.getElementById(\'msPeopleBack\');\n\n    var resolveInputEl = document.getElementById(\'msResolveInput\');\n    var resolveBtnEl = document.getElementById(\'msResolveBtn\');\n    var resolveResultEl = document.getElementById(\'msResolveResult\');\n    var resolveResultBodyEl = document.getElementById(\'msResolveResultBody\');\n    var feedbackEl = document.getElementById(\'msResolveFeedback\');\n\n    var videoResultEl = document.getElementById(\'msVideoResult\');\n    var videoGridEl = document.getElementById(\'msVideoGrid\');\n    var videoSubEl = document.getElementById(\'msVideoSub\');\n    var videoStatEl = document.getElementById(\'msVideoStat\');\n    var inlinePlayerWrapEl = document.getElementById(\'msInlinePlayerWrap\');\n    var inlinePlayerEl = document.getElementById(\'msInlinePlayer\');\n    var inlinePlayerMetaEl = document.getElementById(\'msInlinePlayerMeta\');\n\n    var PEOPLE_MAP = {};\n    var SELECTED_MAP = {};\n    var ACTIVE_CANDIDATE_ID = \'\';\n    var ACTIVE_ORIGINAL_NAME = \'\';\n\n    var PAGE_SIZE = 30;\n\n    var ALL_PEOPLE_ITEMS = [];\n    var PEOPLE_PAGE = 1;\n\n    var ALL_VIDEO_ITEMS = [];\n    var VIDEO_PAGE = 1;\n    var CURRENT_VIDEO_NAME = \'\';\n\n    function esc(str){\n      return String(str == null ? \'\' : str)\n        .replace(/&/g,\'&amp;\')\n        .replace(/</g,\'&lt;\')\n        .replace(/>/g,\'&gt;\')\n        .replace(/\"/g,\'&quot;\')\n        .replace(/\'/g,\'&#39;\');\n    }\n\n    function parseCandidateId(candidateId){\n      var parts = String(candidateId || \'\').split(\'__\');\n      return {\n        video_uuid: parts[0] || \'\',\n        person_id: parts[1] || \'\'\n      };\n    }\n\n    function safeNum(v, fb){\n      var n = Number(v);\n      return Number.isFinite(n) ? n : (fb == null ? 0 : fb);\n    }\n\n    function formatSec(sec){\n      var s = Math.max(0, Math.round(safeNum(sec, 0)));\n      var m = Math.floor(s / 60), r = s % 60;\n      return m + \':\' + String(r).padStart(2, \'0\');\n    }\n\n    function formatDate(v){\n      return v || \'—\';\n    }\n\n    function showToast(msg, ms){\n      if (!toastEl) return;\n      toastEl.textContent = msg || \'\';\n      toastEl.classList.add(\'show\');\n      clearTimeout(showToast._t);\n      showToast._t = setTimeout(function(){\n        toastEl.classList.remove(\'show\');\n      }, ms || 2400);\n    }\n\n    function showResolveFeedback(msg, type){\n      if(!feedbackEl) return;\n      feedbackEl.textContent = msg || \'\';\n      feedbackEl.className = \'ms-resolve-feedback show\' + (type ? \' \' + type : \'\');\n      clearTimeout(showResolveFeedback._t);\n      showResolveFeedback._t = setTimeout(function(){\n        feedbackEl.classList.remove(\'show\');\n      }, 3000);\n    }\n\n    function renderLoading(){\n      gridEl.innerHTML = \'<div class=\"ms-loading\" style=\"grid-column:1/-1;\">Loading people…</div>\';\n      statEl.textContent = \'Loading…\';\n      peoplePaginationEl.style.display = \'none\';\n      updateMergeToolbar();\n    }\n\n    function renderError(msg){\n      gridEl.innerHTML = \'<div class=\"ms-error\" style=\"grid-column:1/-1;\">\' + esc(msg || \'Failed to load people.\') + \'</div>\';\n      statEl.textContent = \'Error\';\n      peoplePaginationEl.style.display = \'none\';\n      updateMergeToolbar();\n    }\n\n    function renderEmpty(){\n      gridEl.innerHTML = \'<div class=\"ms-empty\" style=\"grid-column:1/-1;\">No identity candidates yet.</div>\';\n      statEl.textContent = \'0 people\';\n      peoplePaginationEl.style.display = \'none\';\n      updateMergeToolbar();\n    }\n\n    function getDisplayName(item){\n      return item && item.display_name && item.display_name.trim()\n        ? item.display_name\n        : \'Unknown Person\';\n    }\n\n    function getPreviewImage(item){\n      return (item && item.preview_image) ? item.preview_image : \'\';\n    }\n\n    function getSelectedIds(){\n      return Object.keys(SELECTED_MAP).filter(function(id){\n        return !!SELECTED_MAP[id];\n      });\n    }\n\n    function updateMergeToolbar(){\n      var count = getSelectedIds().length;\n      mergeOpenBtnEl.disabled = count < 2;\n      clearBtnEl.disabled = count === 0;\n      mergeOpenBtnEl.textContent = \'Merge Selected (\' + count + \')\';\n    }\n\n    function showPeopleGrid(){\n      gridEl.style.display = \'\';\n      peoplePaginationEl.style.display = getPeopleTotalPages() > 1 ? \'flex\' : \'none\';\n      videoResultEl.style.display = \'none\';\n      backBtnEl.style.display = \'none\';\n      inlinePlayerWrapEl.style.display = \'none\';\n      inlinePlayerEl.pause();\n      inlinePlayerEl.removeAttribute(\'src\');\n      inlinePlayerEl.load();\n    }\n\n    function showVideoSection(){\n      gridEl.style.display = \'none\';\n      peoplePaginationEl.style.display = \'none\';\n      videoResultEl.style.display = \'block\';\n      backBtnEl.style.display = \'\';\n    }\n\n    function personCard(item){\n      var name = getDisplayName(item);\n      var checked = !!SELECTED_MAP[item.candidate_id];\n\n      return (\n        \'<div class=\"ms-card\' + (checked ? \' is-selected\' : \'\') + \'\" data-candidate-id=\"\' + esc(item.candidate_id) + \'\">\' +\n          \'<div class=\"ms-thumb\">\' +\n            \'<div class=\"ms-thumb-loader\" id=\"tl_\' + esc(item.candidate_id) + \'\"></div>\' +\n            \'<img loading=\"lazy\" src=\"\' + esc(getPreviewImage(item)) + \'\" alt=\"\' + esc(name) + \'\"\' +\n              \' onload=\"var l=document.getElementById(\\\'tl_\' + esc(item.candidate_id) + \'\\\');if(l)l.style.display=\\\'none\\\';\">\' +\n            \'<input class=\"ms-check\" type=\"checkbox\" data-role=\"select-person\" data-candidate-id=\"\' + esc(item.candidate_id) + \'\"\' + (checked ? \' checked\' : \'\') + \'>\' +\n            \'<div class=\"ms-badge\">\' + esc(item.source_type || \'person\') + \'</div>\' +\n          \'</div>\' +\n          \'<div class=\"ms-cmeta\">\' +\n            \'<div class=\"ms-ctitle\" data-role=\"person-name\">\' + esc(name) + \'</div>\' +\n            \'<div class=\"ms-cinfo\">\' +\n              \'<div class=\"ms-crow\"><span>clips</span><span class=\"ms-cval\">\' + esc(item.count || 0) + \'</span></div>\' +\n              \'<div class=\"ms-crow\"><span>face</span><span class=\"ms-cval\">\' + esc(item.face_cluster_id || \'—\') + \'</span></div>\' +\n              \'<div class=\"ms-crow\"><span>speaker</span><span class=\"ms-cval\">\' + esc(item.speaker_cluster_id || \'—\') + \'</span></div>\' +\n              \'<div class=\"ms-crow\"><span>last</span><span class=\"ms-cval\">\' + esc(formatDate(item.last_seen)) + \'</span></div>\' +\n              \'<div class=\"ms-crow\"><span>id</span><span class=\"ms-cval\">\' + esc(item.candidate_id || \'—\') + \'</span></div>\' +\n            \'</div>\' +\n            \'<div class=\"ms-card-actions\">\' +\n              \'<button class=\"ms-card-btn ms-card-btn-primary\" type=\"button\" data-role=\"person-open\" data-candidate-id=\"\' + esc(item.candidate_id) + \'\">View clips</button>\' +\n              \'<button class=\"ms-card-btn\" type=\"button\" data-role=\"person-rename\" data-candidate-id=\"\' + esc(item.candidate_id) + \'\">Rename</button>\' +\n            \'</div>\' +\n          \'</div>\' +\n        \'</div>\'\n      );\n    }\n\n    function paginate(items, page, size){\n      var start = (page - 1) * size;\n      return items.slice(start, start + size);\n    }\n\n    function getPeopleTotalPages(){\n      return Math.max(1, Math.ceil((ALL_PEOPLE_ITEMS.length || 0) / PAGE_SIZE));\n    }\n\n    function getVideoTotalPages(){\n      return Math.max(1, Math.ceil((ALL_VIDEO_ITEMS.length || 0) / PAGE_SIZE));\n    }\n\n    function buildPageButtons(current, total, kind){\n      var html = \'\';\n      html += \'<button class=\"ms-page-btn\" type=\"button\" data-page-kind=\"\' + kind + \'\" data-page-action=\"prev\"\' + (current <= 1 ? \' disabled\' : \'\') + \'>Prev</button>\';\n      html += \'<span class=\"ms-page-info\">第 \' + current + \' 页 / 共 \' + total + \' 页</span>\';\n\n      var start = Math.max(1, current - 2);\n      var end = Math.min(total, current + 2);\n\n      if(start > 1){\n        html += \'<button class=\"ms-page-btn ms-page-num\" type=\"button\" data-page-kind=\"\' + kind + \'\" data-page=\"1\">1</button>\';\n        if(start > 2){\n          html += \'<span class=\"ms-page-info\">...</span>\';\n        }\n      }\n\n      for(var i = start; i <= end; i++){\n        html += \'<button class=\"ms-page-btn ms-page-num\' + (i === current ? \' is-active\' : \'\') + \'\" type=\"button\" data-page-kind=\"\' + kind + \'\" data-page=\"\' + i + \'\">\' + i + \'</button>\';\n      }\n\n      if(end < total){\n        if(end < total - 1){\n          html += \'<span class=\"ms-page-info\">...</span>\';\n        }\n        html += \'<button class=\"ms-page-btn ms-page-num\" type=\"button\" data-page-kind=\"\' + kind + \'\" data-page=\"\' + total + \'\">\' + total + \'</button>\';\n      }\n\n      html += \'<button class=\"ms-page-btn\" type=\"button\" data-page-kind=\"\' + kind + \'\" data-page-action=\"next\"\' + (current >= total ? \' disabled\' : \'\') + \'>Next</button>\';\n\n      return html;\n    }\n\n    function renderPeoplePagination(){\n      var totalPages = getPeopleTotalPages();\n\n      if(ALL_PEOPLE_ITEMS.length <= PAGE_SIZE){\n        peoplePaginationEl.style.display = \'none\';\n        peoplePaginationEl.innerHTML = \'\';\n        return;\n      }\n\n      peoplePaginationEl.innerHTML = buildPageButtons(PEOPLE_PAGE, totalPages, \'people\');\n      peoplePaginationEl.style.display = \'flex\';\n    }\n\n    function renderVideoPagination(){\n      var totalPages = getVideoTotalPages();\n\n      if(ALL_VIDEO_ITEMS.length <= PAGE_SIZE){\n        videoPaginationEl.style.display = \'none\';\n        videoPaginationEl.innerHTML = \'\';\n        return;\n      }\n\n      videoPaginationEl.innerHTML = buildPageButtons(VIDEO_PAGE, totalPages, \'video\');\n      videoPaginationEl.style.display = \'flex\';\n    }\n\n    function renderPeoplePage(){\n      if(!Array.isArray(ALL_PEOPLE_ITEMS) || !ALL_PEOPLE_ITEMS.length){\n        PEOPLE_MAP = {};\n        renderEmpty();\n        return;\n      }\n\n      var totalPages = getPeopleTotalPages();\n      if(PEOPLE_PAGE < 1) PEOPLE_PAGE = 1;\n      if(PEOPLE_PAGE > totalPages) PEOPLE_PAGE = totalPages;\n\n      var pageItems = paginate(ALL_PEOPLE_ITEMS, PEOPLE_PAGE, PAGE_SIZE);\n\n      PEOPLE_MAP = {};\n      pageItems.forEach(function(item){\n        PEOPLE_MAP[item.candidate_id] = item;\n      });\n\n      gridEl.innerHTML = pageItems.map(personCard).join(\'\');\n      statEl.textContent = ALL_PEOPLE_ITEMS.length + \' people\';\n      renderPeoplePagination();\n      updateMergeToolbar();\n      showPeopleGrid();\n      window.scrollTo({ top: 0, behavior: \'smooth\' });\n    }\n\n    function renderVideoPage(){\n      var results = ALL_VIDEO_ITEMS || [];\n      var name = CURRENT_VIDEO_NAME || \'\';\n\n      videoSubEl.textContent = name ? (\'Identity: \' + name) : \'—\';\n      videoStatEl.textContent = (results && results.length ? results.length : 0) + \' moments\';\n\n      if(!Array.isArray(results) || !results.length){\n        videoGridEl.innerHTML = \'<div class=\"ms-empty\" style=\"grid-column:1/-1;\">No video moments found.</div>\';\n        videoPaginationEl.style.display = \'none\';\n        showVideoSection();\n        return;\n      }\n\n      var totalPages = getVideoTotalPages();\n      if(VIDEO_PAGE < 1) VIDEO_PAGE = 1;\n      if(VIDEO_PAGE > totalPages) VIDEO_PAGE = totalPages;\n\n      var pageItems = paginate(results, VIDEO_PAGE, PAGE_SIZE);\n\n      videoGridEl.innerHTML = pageItems.map(function(item){\n        var thumb = \'https://wp.momentry.ddns.net/?momentry_thumb=1&uuid=\' +\n          encodeURIComponent(item.video_id || \'\') +\n          \'&t=\' + encodeURIComponent(safeNum(item.t_start, 0));\n\n        return (\n          \'<div class=\"ms-vcard\" data-role=\"video-open\"\' +\n            \' data-video-url=\"\' + esc(item.video_proxy_url || item.video_url || \'\') + \'\"\' +\n            \' data-video-id=\"\' + esc(item.video_id || \'\') + \'\"\' +\n            \' data-t-start=\"\' + esc(item.t_start || 0) + \'\"\' +\n            \' data-title=\"\' + esc(item.title || \'Untitled\') + \'\"\' +\n            \' data-snippet=\"\' + esc(item.snippet || \'\') + \'\">\' +\n            \'<div class=\"ms-vrow\">\' +\n              \'<div class=\"ms-vthumb\"><img loading=\"lazy\" src=\"\' + esc(thumb) + \'\" alt=\"\"></div>\' +\n              \'<div class=\"ms-vmeta\">\' +\n                \'<div class=\"ms-vname\">\' + esc(item.title || \'Untitled\') + \'</div>\' +\n                \'<div class=\"ms-vtext\">\' + esc(item.snippet || \'\') + \'</div>\' +\n              \'</div>\' +\n            \'</div>\' +\n            \'<div class=\"ms-vfoot\">\' +\n              \'<span>\' + esc(formatSec(item.t_start || 0)) + \'</span>\' +\n              \'<span>\' + esc(item.video_id || \'—\') + \'</span>\' +\n            \'</div>\' +\n          \'</div>\'\n        );\n      }).join(\'\');\n\n      renderVideoPagination();\n      showVideoSection();\n      window.scrollTo({ top: 0, behavior: \'smooth\' });\n    }\n\n    function renderItems(items){\n      if(!Array.isArray(items) || !items.length){\n        ALL_PEOPLE_ITEMS = [];\n        PEOPLE_MAP = {};\n        renderEmpty();\n        return;\n      }\n\n      ALL_PEOPLE_ITEMS = items.slice();\n      PEOPLE_PAGE = 1;\n      renderPeoplePage();\n    }\n\n    function renderResolveResult(data){\n      if(!data){\n        resolveResultEl.style.display = \'none\';\n        resolveResultBodyEl.textContent = \'\';\n        return;\n      }\n\n      resolveResultBodyEl.textContent = [\n        \'identity_name: \' + (data.identity_name || \'—\'),\n        \'identity_id: \' + (data.identity_id || \'—\'),\n        \'candidate_ids: \' + JSON.stringify(data.candidate_ids || []),\n        \'face_cluster_ids: \' + JSON.stringify(data.face_cluster_ids || []),\n        \'speaker_cluster_ids: \' + JSON.stringify(data.speaker_cluster_ids || [])\n      ].join(\'\\n\');\n\n      resolveResultEl.style.display = \'block\';\n    }\n\n    function renderVideoResults(name, results){\n      CURRENT_VIDEO_NAME = name || \'\';\n      ALL_VIDEO_ITEMS = Array.isArray(results) ? results.slice() : [];\n      VIDEO_PAGE = 1;\n      renderVideoPage();\n    }\n\n    function formBody(obj){\n      var fd = new FormData();\n      Object.keys(obj).forEach(function(k){\n        var v = obj[k];\n        if(Array.isArray(v)){\n          v.forEach(function(x){\n            fd.append(k + \'[]\', x);\n          });\n        } else {\n          fd.append(k, v == null ? \'\' : v);\n        }\n      });\n      return fd;\n    }\n\n    function postAjax(action, payload){\n      payload = payload || {};\n      payload.action = action;\n\n      return fetch(AJAX_URL, {\n        method: \'POST\',\n        body: formBody(payload),\n        credentials: \'same-origin\'\n      })\n      .then(function(r){\n        return r.json();\n      })\n      .then(function(json){\n        if(!json || !json.success){\n          var msg = (json && json.data && json.data.message) ? json.data.message : \'Request failed\';\n          throw new Error(msg);\n        }\n        return json.data;\n      });\n    }\n\n    function loadPeople(){\n      renderLoading();\n      postAjax(\'momentry_identity_candidates\', {\n        query: \'\',\n        limit: 300\n      })\n      .then(function(d){\n        renderItems((d && d.items) || []);\n      })\n      .catch(function(err){\n        console.error(err);\n        renderError(\'Failed to load people.\');\n      });\n    }\n\n    function savePersonRename(candidateId, name){\n      var parsed = parseCandidateId(candidateId);\n      return postAjax(\'momentry_person_rename\', {\n        video_uuid: parsed.video_uuid,\n        person_id: parsed.person_id,\n        name: name\n      });\n    }\n\n    function mergeIdentity(name, ids){\n      return postAjax(\'momentry_identity_merge\', {\n        identity_name: name,\n        candidate_ids: ids\n      });\n    }\n\n    function searchIdentity(name){\n      return postAjax(\'momentry_identity_search\', {\n        name: name\n      });\n    }\n\n    function findItemByCandidateId(candidateId){\n      for (var i = 0; i < ALL_PEOPLE_ITEMS.length; i++) {\n        if (ALL_PEOPLE_ITEMS[i].candidate_id === candidateId) {\n          return ALL_PEOPLE_ITEMS[i];\n        }\n      }\n      return null;\n    }\n\n    function updateCardName(candidateId, newName){\n      var selector = \'.ms-card[data-candidate-id=\"\' + candidateId.replace(/\"/g, \'\\\\\"\') + \'\"]\';\n      var card = document.querySelector(selector);\n      if(!card) return;\n      var t = card.querySelector(\'[data-role=\"person-name\"]\');\n      if(t) t.textContent = newName && newName.trim() ? newName : \'Unknown Person\';\n    }\n\n    function setCardSaving(candidateId, saving){\n      var selector = \'.ms-card[data-candidate-id=\"\' + candidateId.replace(/\"/g, \'\\\\\"\') + \'\"]\';\n      var card = document.querySelector(selector);\n      if(card) card.classList.toggle(\'is-saving\', !!saving);\n    }\n\n    function openRenameModal(candidateId){\n      var item = findItemByCandidateId(candidateId) || {};\n      var currentName = item.display_name && item.display_name.trim() ? item.display_name : \'\';\n\n      ACTIVE_CANDIDATE_ID = candidateId;\n      ACTIVE_ORIGINAL_NAME = currentName;\n      inputEl.value = currentName;\n      thumbImgEl.src = getPreviewImage(item);\n      thumbNameEl.textContent = currentName || \'Unknown Person\';\n\n      modalEl.classList.add(\'open\');\n      modalEl.setAttribute(\'aria-hidden\', \'false\');\n      setTimeout(function(){\n        inputEl.focus();\n        inputEl.select();\n      }, 30);\n    }\n\n    function closeRenameModal(){\n      modalEl.classList.remove(\'open\');\n      modalEl.setAttribute(\'aria-hidden\', \'true\');\n      ACTIVE_CANDIDATE_ID = \'\';\n      ACTIVE_ORIGINAL_NAME = \'\';\n    }\n\n    function openMergeModal(){\n      var ids = getSelectedIds();\n      mergeSelectedEl.innerHTML = ids.map(function(id){\n        var item = findItemByCandidateId(id) || {};\n        return \'<span class=\"ms-chip\">\' + esc(getDisplayName(item)) + \'</span>\';\n      }).join(\'\');\n      mergeInputEl.value = \'\';\n      mergeModalEl.classList.add(\'open\');\n      mergeModalEl.setAttribute(\'aria-hidden\', \'false\');\n      setTimeout(function(){\n        mergeInputEl.focus();\n      }, 30);\n    }\n\n    function closeMergeModal(){\n      mergeModalEl.classList.remove(\'open\');\n      mergeModalEl.setAttribute(\'aria-hidden\', \'true\');\n    }\n\n    gridEl.addEventListener(\'click\', function(e){\n      var renameBtn = e.target.closest(\'[data-role=\"person-rename\"]\');\n      if(renameBtn){\n        var candidateId = renameBtn.getAttribute(\'data-candidate-id\');\n        openRenameModal(candidateId);\n        return;\n      }\n\n      var openBtn = e.target.closest(\'[data-role=\"person-open\"]\');\n      if(openBtn){\n        var id = openBtn.getAttribute(\'data-candidate-id\');\n        var item = findItemByCandidateId(id);\n        if(item){\n          var name = getDisplayName(item);\n\n          searchIdentity(name)\n            .then(function(data){\n              var resolved = data.resolve || {};\n              var search = data.search || {};\n\n              renderResolveResult(resolved);\n              renderVideoResults(resolved.identity_name || name, search.results || []);\n              showResolveFeedback(\'Resolved\', \'ok\');\n            })\n            .catch(function(err){\n              console.error(err);\n              renderResolveResult(null);\n              videoGridEl.innerHTML = \'\';\n              videoResultEl.style.display = \'none\';\n              videoPaginationEl.style.display = \'none\';\n              showResolveFeedback(\'Identity not found\', \'err\');\n            });\n        }\n        return;\n      }\n\n      var checkbox = e.target.closest(\'[data-role=\"select-person\"]\');\n      if(checkbox){\n        var cid = checkbox.getAttribute(\'data-candidate-id\');\n        SELECTED_MAP[cid] = checkbox.checked;\n        var card = checkbox.closest(\'.ms-card\');\n        if(card) card.classList.toggle(\'is-selected\', checkbox.checked);\n        updateMergeToolbar();\n      }\n    });\n\n    videoGridEl.addEventListener(\'click\', function(e){\n      var card = e.target.closest(\'[data-role=\"video-open\"]\');\n      if(!card) return;\n\n      var url = card.getAttribute(\'data-video-url\') || \'\';\n      var t = safeNum(card.getAttribute(\'data-t-start\'), 0);\n      var title = card.getAttribute(\'data-title\') || \'\';\n      var snippet = card.getAttribute(\'data-snippet\') || \'\';\n      if(!url) return;\n\n      inlinePlayerWrapEl.style.display = \'block\';\n      inlinePlayerEl.src = url + (url.indexOf(\'?\') > -1 ? \'&\' : \'?\') + \'t=\' + encodeURIComponent(t) + \'#t=\' + encodeURIComponent(t);\n      inlinePlayerMetaEl.textContent = formatSec(t) + \' · \' + title + (snippet ? \' · \' + snippet : \'\');\n      inlinePlayerEl.load();\n      inlinePlayerEl.play().catch(function(){});\n      inlinePlayerWrapEl.scrollIntoView({ behavior:\'smooth\', block:\'start\' });\n    });\n\n    peoplePaginationEl.addEventListener(\'click\', function(e){\n      var btn = e.target.closest(\'button\');\n      if(!btn) return;\n\n      var totalPages = getPeopleTotalPages();\n      var action = btn.getAttribute(\'data-page-action\');\n      var page = parseInt(btn.getAttribute(\'data-page\'), 10);\n\n      if(action === \'prev\' && PEOPLE_PAGE > 1){\n        PEOPLE_PAGE--;\n        renderPeoplePage();\n        return;\n      }\n\n      if(action === \'next\' && PEOPLE_PAGE < totalPages){\n        PEOPLE_PAGE++;\n        renderPeoplePage();\n        return;\n      }\n\n      if(page && page !== PEOPLE_PAGE){\n        PEOPLE_PAGE = page;\n        renderPeoplePage();\n      }\n    });\n\n    videoPaginationEl.addEventListener(\'click\', function(e){\n      var btn = e.target.closest(\'button\');\n      if(!btn) return;\n\n      var totalPages = getVideoTotalPages();\n      var action = btn.getAttribute(\'data-page-action\');\n      var page = parseInt(btn.getAttribute(\'data-page\'), 10);\n\n      if(action === \'prev\' && VIDEO_PAGE > 1){\n        VIDEO_PAGE--;\n        renderVideoPage();\n        return;\n      }\n\n      if(action === \'next\' && VIDEO_PAGE < totalPages){\n        VIDEO_PAGE++;\n        renderVideoPage();\n        return;\n      }\n\n      if(page && page !== VIDEO_PAGE){\n        VIDEO_PAGE = page;\n        renderVideoPage();\n      }\n    });\n\n    backBtnEl.addEventListener(\'click\', function(){\n      showPeopleGrid();\n    });\n\n    clearBtnEl.addEventListener(\'click\', function(){\n      SELECTED_MAP = {};\n      updateMergeToolbar();\n      renderPeoplePage();\n    });\n\n    mergeOpenBtnEl.addEventListener(\'click\', function(){\n      if(getSelectedIds().length < 2) return;\n      openMergeModal();\n    });\n\n    cancelEl.addEventListener(\'click\', closeRenameModal);\n    modalEl.addEventListener(\'click\', function(e){\n      if(e.target === modalEl) closeRenameModal();\n    });\n\n    saveEl.addEventListener(\'click\', function(){\n      var id = ACTIVE_CANDIDATE_ID;\n      var name = (inputEl.value || \'\').trim();\n      if(!id) return;\n\n      setCardSaving(id, true);\n      saveEl.disabled = true;\n\n      savePersonRename(id, name)\n        .then(function(){\n          ALL_PEOPLE_ITEMS.forEach(function(item){\n            if(item.candidate_id === id){\n              item.display_name = name;\n            }\n          });\n          updateCardName(id, name);\n          thumbNameEl.textContent = name || \'Unknown Person\';\n          showToast(\'Saved\');\n          closeRenameModal();\n        })\n        .catch(function(err){\n          console.error(err);\n          showToast(\'Rename failed\');\n        })\n        .finally(function(){\n          setCardSaving(id, false);\n          saveEl.disabled = false;\n        });\n    });\n\n    mergeCancelEl.addEventListener(\'click\', closeMergeModal);\n    mergeModalEl.addEventListener(\'click\', function(e){\n      if(e.target === mergeModalEl) closeMergeModal();\n    });\n\n    mergeSaveEl.addEventListener(\'click\', function(){\n      var ids = getSelectedIds();\n      var name = (mergeInputEl.value || \'\').trim();\n\n      if(ids.length < 2){\n        showToast(\'Please select at least 2 people\');\n        return;\n      }\n      if(!name){\n        showToast(\'Please enter identity name\');\n        return;\n      }\n\n      mergeSaveEl.disabled = true;\n\n      mergeIdentity(name, ids)\n        .then(function(){\n          showToast(\'Merged successfully\');\n          closeMergeModal();\n          SELECTED_MAP = {};\n          loadPeople();\n        })\n        .catch(function(err){\n          console.error(err);\n          showToast(\'Merge failed\');\n        })\n        .finally(function(){\n          mergeSaveEl.disabled = false;\n        });\n    });\n\n    resolveBtnEl.addEventListener(\'click\', function(){\n      var name = (resolveInputEl.value || \'\').trim();\n      if(!name){\n        showResolveFeedback(\'Please enter a name\', \'err\');\n        renderResolveResult(null);\n        return;\n      }\n\n      resolveBtnEl.disabled = true;\n      showResolveFeedback(\'Resolving...\', \'ok\');\n\n      searchIdentity(name)\n        .then(function(data){\n          var resolved = data.resolve || {};\n          var search = data.search || {};\n          renderResolveResult(resolved);\n          renderVideoResults(resolved.identity_name || name, search.results || []);\n          showResolveFeedback(\'Resolved\', \'ok\');\n        })\n        .catch(function(err){\n          console.error(err);\n          renderResolveResult(null);\n          videoGridEl.innerHTML = \'\';\n          videoResultEl.style.display = \'none\';\n          videoPaginationEl.style.display = \'none\';\n          showResolveFeedback(\'Identity not found\', \'err\');\n        })\n        .finally(function(){\n          resolveBtnEl.disabled = false;\n        });\n    });\n\n    resolveInputEl.addEventListener(\'keydown\', function(e){\n      if(e.key === \'Enter\'){\n        e.preventDefault();\n        resolveBtnEl.click();\n      }\n    });\n\n    inputEl.addEventListener(\'keydown\', function(e){\n      if(e.key === \'Enter\'){\n        e.preventDefault();\n        saveEl.click();\n      }\n    });\n\n    mergeInputEl.addEventListener(\'keydown\', function(e){\n      if(e.key === \'Enter\'){\n        e.preventDefault();\n        mergeSaveEl.click();\n      }\n    });\n\n    loadPeople();\n  })();\n  </script>\n  <?php\n});','','global',0,10,1,'2026-04-16 11:07:00',1,NULL),
(46,'help-email-UN','<p>回報問題</p>','add_action(\'wp_head\', function () {\n    if (is_user_logged_in()) {\n        echo \'<script>window.MS_NONCE = \"\' . esc_js(wp_create_nonce(\'wp_rest\')) . \'\";</script>\';\n    } else {\n        echo \'<script>window.MS_NONCE = \"\";</script>\';\n    }\n});\n\nadd_action(\'rest_api_init\', function () {\n    register_rest_route(\'momentry/v1\', \'/help-report\', array(\n        \'methods\'  => \'POST\',\n        \'callback\' => \'ms_handle_help_report\',\n        \'permission_callback\' => function () {\n            return is_user_logged_in();\n        },\n    ));\n});\n\nfunction ms_handle_help_report($request) {\n    $params = $request->get_json_params();\n\n    $message = isset($params[\'message\']) ? trim(wp_unslash($params[\'message\'])) : \'\';\n    $page = isset($params[\'page\']) ? esc_url_raw($params[\'page\']) : \'\';\n    $submitted_at = isset($params[\'submitted_at\']) ? sanitize_text_field($params[\'submitted_at\']) : \'\';\n    $user_agent = isset($params[\'user_agent\']) ? sanitize_text_field($params[\'user_agent\']) : \'\';\n\n    if ($message === \'\') {\n        return new WP_REST_Response(array(\n            \'success\' => false,\n            \'message\' => \'請輸入內容\'\n        ), 400);\n    }\n\n    $current_user = wp_get_current_user();\n    $user_login   = \'\';\n    $display_name = \'\';\n    $user_email   = \'\';\n\n    if ($current_user && $current_user->exists()) {\n        $user_login   = $current_user->user_login;\n        $display_name = $current_user->display_name;\n        $user_email   = $current_user->user_email;\n    }\n\n    $mail_subject = \'Momentry 問題回報 - \' . ($user_login ?: \'guest\');\n\n    $mail_body  = \"收到新的 Momentry 問題回報\\n\\n\";\n    $mail_body .= \"寄出者帳號： \" . ($user_login ?: \'(未登入)\') . \"\\n\";\n    $mail_body .= \"顯示名稱： \" . ($display_name ?: \'-\') . \"\\n\";\n    $mail_body .= \"Email： \" . ($user_email ?: \'-\') . \"\\n\";\n    $mail_body .= \"頁面： \" . ($page ?: \'-\') . \"\\n\";\n    $mail_body .= \"提交時間： \" . ($submitted_at ?: current_time(\'mysql\')) . \"\\n\";\n    $mail_body .= \"User Agent： \" . ($user_agent ?: \'-\') . \"\\n\";\n    $mail_body .= \"\\n-----------------------------\\n\";\n    $mail_body .= \"問題內容：\\n\" . $message . \"\\n\";\n\n	\n	$headers = array(\n        \'Content-Type: text/plain; charset=UTF-8\'\n    );\n\n    if (!empty($user_email)) {\n        $headers[] = \'Reply-To: \' . $display_name . \' <\' . $user_email . \'>\';\n    }\n\n    wp_mail(\n        \'una@accusys.com.tw\',\n        $mail_subject,\n        $mail_body,\n        $headers\n    );\n\n\n    return new WP_REST_Response(array(\n        \'success\' => true,\n        \'message\' => \'已成功送出問題回報\'\n    ), 200);\n}','','global',0,10,1,'2026-05-20 15:14:59',1,NULL),
(47,'People Tab Bar','','/**\n * Momentry People Tab Bar\n * 用于 lt-people-files / lt-people-people\n * 点击顶部「档案管理 / 人物管理」时，不刷新 sidebar，只替换右边内容\n */\n\nadd_filter(\'the_content\', function ($content) {\n\n  if (!is_page([\'lt-people-files\', \'lt-people-people\'])) return $content;\n\n  $is_files  = is_page(\'lt-people-files\');\n  $is_people = is_page(\'lt-people-people\');\n\n  ob_start(); ?>\n\n  <style>\n    .ms-people-tabs {\n      display: flex;\n      gap: 34px;\n      border-bottom: 1.5px solid #e8eaed;\n      margin-bottom: 24px;\n    }\n\n    .ms-people-tab {\n      padding: 10px 0 12px 0;\n      font-size: 15px;\n      font-weight: 600;\n      color: #202124;\n      text-decoration: none;\n      border-bottom: 2.5px solid transparent;\n      margin-bottom: -1.5px;\n      white-space: nowrap;\n      background: transparent !important;\n      box-shadow: none !important;\n      outline: none !important;\n      transition: none !important;\n      animation: none !important;\n      -webkit-tap-highlight-color: transparent !important;\n    }\n\n    .ms-people-tab:hover,\n    .ms-people-tab:focus,\n    .ms-people-tab:active,\n    .ms-people-tab:focus-visible {\n      color: #202124;\n      text-decoration: none;\n      background: transparent !important;\n      box-shadow: none !important;\n      outline: none !important;\n    }\n\n    .ms-people-tab.active {\n      color: #202124;\n      font-weight: 700;\n      border-bottom-color: #202124;\n      background: transparent !important;\n    }\n  </style>\n\n  <div class=\"ms-people-tabs\">\n    <a class=\"ms-people-tab <?php echo $is_files ? \'active\' : \'\'; ?>\"\n       href=\"<?php echo esc_url(home_url(\'/lt-people-files/\')); ?>\">\n      檔案管理\n    </a>\n\n    <a class=\"ms-people-tab <?php echo $is_people ? \'active\' : \'\'; ?>\"\n       href=\"<?php echo esc_url(home_url(\'/lt-people-people/\')); ?>\">\n      人物管理\n    </a>\n  </div>\n\n  <?php echo $content; ?>\n\n  <script>\n  (function(){\n\n    if (window.msPeopleTabsAjaxReady) return;\n    window.msPeopleTabsAjaxReady = true;\n\n    function setPeopleTabActive(url) {\n      var path = new URL(url, window.location.origin).pathname;\n\n      document.querySelectorAll(\".ms-people-tab\").forEach(function(tab){\n        var tabPath = new URL(tab.href, window.location.origin).pathname;\n        tab.classList.toggle(\"active\", tabPath === path);\n      });\n    }\n\n    function runScripts(container) {\n      var scripts = container.querySelectorAll(\"script\");\n\n      scripts.forEach(function(oldScript){\n        var newScript = document.createElement(\"script\");\n\n        Array.from(oldScript.attributes).forEach(function(attr){\n          newScript.setAttribute(attr.name, attr.value);\n        });\n\n        newScript.textContent = oldScript.textContent;\n        oldScript.parentNode.replaceChild(newScript, oldScript);\n      });\n    }\n\n    async function loadPeoplePage(url) {\n      var main = document.querySelector(\".ms-main\");\n\n      if (!main) {\n        window.location.href = url;\n        return;\n      }\n\n      try {\n        main.style.opacity = \"0.55\";\n\n        var res = await fetch(url, {\n          method: \"GET\",\n          credentials: \"same-origin\",\n          headers: {\n            \"X-Requested-With\": \"XMLHttpRequest\"\n          }\n        });\n\n        if (!res.ok) throw new Error(\"Page load failed\");\n\n        var html = await res.text();\n        var doc = new DOMParser().parseFromString(html, \"text/html\");\n        var newMain = doc.querySelector(\".ms-main\");\n\n        if (!newMain) {\n          window.location.href = url;\n          return;\n        }\n\n        main.innerHTML = newMain.innerHTML;\n        runScripts(main);\n\n        history.pushState({ msPeopleAjaxPage: url }, \"\", url);\n        setPeopleTabActive(url);\n\n        setTimeout(function(){\n          main.style.opacity = \"1\";\n        }, 80);\n\n      } catch (err) {\n        console.error(\"People tab AJAX failed:\", err);\n        window.location.href = url;\n      }\n    }\n\n    document.addEventListener(\"click\", function(e){\n      var tab = e.target.closest(\".ms-people-tab\");\n      if (!tab) return;\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (document.activeElement) {\n        document.activeElement.blur();\n      }\n\n      loadPeoplePage(tab.href);\n    });\n\n    window.addEventListener(\"popstate\", function(){\n      setPeopleTabActive(window.location.href);\n    });\n\n  })();\n  </script>\n\n  <?php\n  return ob_get_clean();\n\n}, 98);','','global',0,10,0,'2026-04-27 03:13:23',1,NULL),
(48,'Scan 功能 - test -SC','<p>測試-讀取本地檔案用</p>','if (!defined(\'ABSPATH\')) {\n    exit;\n}\n\ndefine(\'MOMENTRY_CORE_BASE_URL\', \'http://192.168.110.201:3002\');\ndefine(\'MOMENTRY_API_KEY\', \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\');\n\n/**\n * Call Momentry Core API\n */\nfunction momentry_call_core($method, $path, $body = null) {\n    $url = rtrim(MOMENTRY_CORE_BASE_URL, \'/\') . $path;\n\n    $args = [\n        \'method\'  => strtoupper($method),\n        \'headers\' => [\n            \'X-API-Key\'    => MOMENTRY_API_KEY,\n            \'Content-Type\' => \'application/json\',\n            \'Accept\'       => \'application/json\',\n        ],\n        \'timeout\' => 30,\n    ];\n\n    if ($body !== null) {\n        $args[\'body\'] = wp_json_encode($body);\n    }\n\n    $response = wp_remote_request($url, $args);\n\n    if (is_wp_error($response)) {\n        return [\n            \'ok\' => false,\n            \'core_url\' => $url,\n            \'http_code\' => 0,\n            \'raw_response\' => \'\',\n            \'data\' => null,\n            \'error\' => $response->get_error_message(),\n        ];\n    }\n\n    $http_code = wp_remote_retrieve_response_code($response);\n    $raw_body  = wp_remote_retrieve_body($response);\n    $data      = json_decode($raw_body, true);\n\n    return [\n        \'ok\' => ($http_code >= 200 && $http_code < 300),\n        \'core_url\' => $url,\n        \'http_code\' => $http_code,\n        \'raw_response\' => $raw_body,\n        \'data\' => $data,\n    ];\n}\n\n/**\n * Register Momentry REST API routes\n */\nadd_action(\'rest_api_init\', function () {\n\n    register_rest_route(\'momentry/v1\', \'/health\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function () {\n            return momentry_call_core(\'GET\', \'/health\');\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/videos\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function () {\n            return momentry_call_core(\'GET\', \'/api/v1/videos\');\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/scan\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function () {\n            return momentry_call_core(\'GET\', \'/api/v1/files/scan\');\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/lookup/(?P<uuid>[^/]+)\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function ($request) {\n            $uuid = sanitize_text_field($request[\'uuid\']);\n\n            return momentry_call_core(\n                \'GET\',\n                \'/api/v1/lookup?uuid=\' . rawurlencode($uuid)\n            );\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/progress/(?P<uuid>[^/]+)\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function ($request) {\n            $uuid = sanitize_text_field($request[\'uuid\']);\n\n            return momentry_call_core(\n                \'GET\',\n                \'/api/v1/progress/\' . rawurlencode($uuid)\n            );\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/process/(?P<uuid>[^/]+)\', [\n        \'methods\' => \'POST\',\n        \'callback\' => function ($request) {\n            $uuid = sanitize_text_field($request[\'uuid\']);\n            $body = $request->get_json_params();\n\n            if (!is_array($body)) {\n                $body = [];\n            }\n\n            return momentry_call_core(\n                \'POST\',\n                \'/api/v1/assets/\' . rawurlencode($uuid) . \'/process\',\n                $body\n            );\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/search\', [\n        \'methods\' => \'POST\',\n        \'callback\' => function ($request) {\n            $body = $request->get_json_params();\n\n            if (!is_array($body)) {\n                $body = [];\n            }\n\n            return momentry_call_core(\'POST\', \'/api/v1/search\', [\n                \'query\' => sanitize_text_field($body[\'query\'] ?? \'\'),\n                \'limit\' => intval($body[\'limit\'] ?? 10),\n            ]);\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/register\', [\n        \'methods\' => \'POST\',\n        \'callback\' => function ($request) {\n            $body = $request->get_json_params();\n            $file_path = sanitize_text_field($body[\'file_path\'] ?? $request->get_param(\'file_path\'));\n\n            return momentry_call_core(\'POST\', \'/api/v1/files/register\', [\n                \'file_path\' => $file_path,\n            ]);\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/unregister\', [\n        \'methods\' => \'POST\',\n        \'callback\' => function ($request) {\n            $body = $request->get_json_params();\n            $uuid = sanitize_text_field($body[\'uuid\'] ?? $request->get_param(\'uuid\'));\n\n            return momentry_call_core(\'POST\', \'/api/v1/unregister\', [\n                \'uuid\' => $uuid,\n            ]);\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/probe/(?P<uuid>[^/]+)\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function ($request) {\n            $uuid = sanitize_text_field($request[\'uuid\']);\n\n            return momentry_call_core(\n                \'GET\',\n                \'/api/v1/files/\' . rawurlencode($uuid) . \'/probe\'\n            );\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/faces\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function ($request) {\n            $file_uuid = sanitize_text_field($request->get_param(\'file_uuid\'));\n            $min_confidence = sanitize_text_field($request->get_param(\'min_confidence\') ?: \'0.5\');\n            $page_size = sanitize_text_field($request->get_param(\'page_size\') ?: \'20\');\n\n            $path = \'/api/v1/faces/candidates\'\n                . \'?file_uuid=\' . rawurlencode($file_uuid)\n                . \'&min_confidence=\' . rawurlencode($min_confidence)\n                . \'&page_size=\' . rawurlencode($page_size);\n\n            return momentry_call_core(\'GET\', $path);\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/bind\', [\n        \'methods\' => \'POST\',\n        \'callback\' => function ($request) {\n            $body = $request->get_json_params();\n\n            if (!is_array($body)) {\n                $body = [];\n            }\n\n            return momentry_call_core(\'POST\', \'/api/v1/identities/bind\', [\n                \'identity_id\' => sanitize_text_field($body[\'identity_id\'] ?? $request->get_param(\'identity_id\')),\n                \'binding_type\' => sanitize_text_field($body[\'binding_type\'] ?? $request->get_param(\'binding_type\') ?: \'face\'),\n                \'binding_value\' => sanitize_text_field($body[\'binding_value\'] ?? $request->get_param(\'binding_value\')),\n            ]);\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n\n    register_rest_route(\'momentry/v1\', \'/identities\', [\n        \'methods\' => \'GET\',\n        \'callback\' => function () {\n            return momentry_call_core(\'GET\', \'/api/v1/identities\');\n        },\n        \'permission_callback\' => \'__return_true\',\n    ]);\n});','測試-讀取本地檔案用','global',0,10,1,'2026-05-27 02:10:05',1,NULL),
(49,'Code Snippets / functions -SC','<p>測試-讀取本地檔案用</p>','add_action(\'rest_api_init\', function () {\n  register_rest_route(\'momentry/v1\', \'/explore/files\', [\n    \'methods\' => \'GET\',\n    \'callback\' => \'momentry_explore_files\',\n    \'permission_callback\' => \'__return_true\',\n  ]);\n});\n\nfunction momentry_explore_files(WP_REST_Request $request) {\n  $dir_key = sanitize_text_field($request->get_param(\'dir\'));\n\n  // 只允許這幾個資料夾，避免亂讀整台電腦\n  $allowed_dirs = [\n    \'downloads\' => \'/Users/susan/Downloads\',\n    \'desktop\'   => \'/Users/susan/Desktop\',\n  ];\n\n  if (!isset($allowed_dirs[$dir_key])) {\n    return [\n      \'ok\' => false,\n      \'message\' => \'Directory not allowed\',\n      \'files\' => []\n    ];\n  }\n\n  $target_dir = $allowed_dirs[$dir_key];\n\n  if (!is_dir($target_dir)) {\n    return [\n      \'ok\' => false,\n      \'message\' => \'Directory not found: \' . $target_dir,\n      \'files\' => []\n    ];\n  }\n\n  $items = scandir($target_dir);\n  $files = [];\n\n  foreach ($items as $item) {\n    if ($item === \'.\' || $item === \'..\') continue;\n\n    $path = $target_dir . \'/\' . $item;\n\n    $files[] = [\n      \'name\' => $item,\n      \'type\' => is_dir($path) ? \'folder\' : \'file\',\n      \'size\' => is_file($path) ? filesize($path) : 0,\n      \'modified\' => date(\'Y-m-d H:i:s\', filemtime($path)),\n      \'path\' => $path\n    ];\n  }\n\n  return [\n    \'ok\' => true,\n    \'directory\' => $dir_key,\n    \'count\' => count($files),\n    \'files\' => $files\n  ];\n}','測試-讀取本地檔案用','global',0,10,1,'2026-05-27 02:09:59',1,NULL),
(50,'TEST','','add_shortcode(\'ms_login_form_v2\', function () {\n\n  if (is_user_logged_in()) {\n    return \'<p>You are already logged in. <a href=\"\' . esc_url(home_url(\'/lt-searching/\')) . \'\">Go to Playground</a></p>\';\n  }\n\n  ob_start();\n\n  echo \'<div id=\"ms-login-card\">\';\n  echo \'<h3>Log in to Momentry Studio</h3>\';\n\n  if (isset($_GET[\'login\']) && $_GET[\'login\'] === \'failed\') {\n    echo \'<p style=\"color:red;\">Incorrect username or password.</p>\';\n  }\n\n  wp_login_form(array(\n    \'redirect\' => home_url(\'/lt-searching/\'),\n    \'label_username\' => \'Username / Email\',\n    \'label_password\' => \'Password\',\n    \'label_log_in\' => \'Log in\',\n    \'remember\' => true\n  ));\n\n  echo \'<p><a href=\"\' . esc_url(home_url(\'/login/?forgot=1\')) . \'\">Forgot password?</a></p>\';\n\n  if (isset($_GET[\'forgot\']) && $_GET[\'forgot\'] === \'1\') {\n    echo \'<p style=\"color:red;\">Please contact the administrator to reset your password.</p>\';\n  }\n\n  echo \'</div>\';\n\n  return ob_get_clean();\n});','','global',0,10,-1,'2026-05-07 02:46:25',1,NULL),
(51,'Momentry Login Failed Redirect -SC','','add_action(\'wp_login_failed\', function () {\n  wp_safe_redirect(home_url(\'/login/?login=failed\'));\n  exit;\n});\n\nadd_filter(\'authenticate\', function ($user, $username, $password) {\n\n  if (empty($username) || empty($password)) {\n    wp_safe_redirect(home_url(\'/login/?login=failed\'));\n    exit;\n  }\n\n  return $user;\n\n}, 1, 3);','','global',0,10,-1,'2026-05-07 02:51:08',1,NULL),
(52,'Login Failed Redirect','<p>登入失敗顯示畫面</p>','add_action(\'wp_login_failed\', function ($username) {\n\n  // 清掉可能殘留的登入狀態\n  wp_clear_auth_cookie();\n\n  $redirect_to = isset($_POST[\'redirect_to\'])\n    ? esc_url_raw($_POST[\'redirect_to\'])\n    : home_url(\'/lt-searching/\');\n\n  wp_safe_redirect(\n    home_url(\'/login/?login=failed&redirect_to=\' . rawurlencode($redirect_to))\n  );\n\n  exit;\n});','登入失敗顯示畫面','global',0,10,1,'2026-05-27 02:09:30',1,NULL),
(53,'Custom Lost Password Page','<p>把 WordPress 預設 reset password 頁面 → 改成 Momentry UI</p>','add_shortcode(\'ms_lost_password_form\', function () {\n\n  ob_start(); ?>\n\n  <style>\n  html, body{\n    margin:0 !important;\n    padding:0 !important;\n    background:#0b1020 !important;\n  }\n\n  header, footer{\n    display:none !important;\n  }\n\n  #ms-login-wrap{\n    width:100vw;\n    min-height:100vh;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    background:#0b1020;\n    font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n  }\n\n  #ms-login-card{\n    width:min(520px,100%);\n    background:rgba(255,255,255,.06);\n    border:1px solid rgba(255,255,255,.12);\n    border-radius:24px;\n    padding:32px;\n    box-shadow:0 18px 70px rgba(0,0,0,.35);\n    color:#fff;\n  }\n\n  #ms-login-card h3{\n    margin:0 0 16px;\n    font-size:32px;\n  }\n\n  #ms-login-card p{\n    opacity:.7;\n    margin-bottom:20px;\n  }\n\n  #ms-login-card input{\n    width:100%;\n    padding:16px;\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,.2);\n    background:rgba(0,0,0,.3);\n    color:#fff;\n    margin-bottom:16px;\n  }\n\n  #ms-login-card button{\n    width:100%;\n    padding:16px;\n    border-radius:16px;\n    border:0;\n    background:#5b8cff;\n    color:#fff;\n    font-weight:700;\n    cursor:pointer;\n  }\n\n  #ms-login-card a{\n    display:block;\n    text-align:center;\n    margin-top:16px;\n    color:rgba(255,255,255,.7);\n    text-decoration:none;\n  }\n\n  #ms-login-card a:hover{\n    color:#fff;\n  }\n\n  .ms-success{\n    background:rgba(34,197,94,.2);\n    padding:12px;\n    border-radius:10px;\n    margin-bottom:16px;\n  }\n			  \n			  #ms-login-card input,\n#ms-login-card button{\n  display:block;\n  width:100%;\n  max-width:100%;\n  box-sizing:border-box;   /* 關鍵 */\n  margin:0;\n}\n			  #ms-login-card input{\n  margin-bottom:16px;\n}\n			  #ms-login-card input,\n#ms-login-card button{\n  padding:16px 18px;\n  border-radius:16px;\n  font-size:16px;\n}\n\n  </style>\n\n  <div id=\"ms-login-wrap\">\n    <div id=\"ms-login-card\">\n\n      <h3>Reset your password</h3>\n      <p>Enter your email and we’ll send you a reset link.</p>\n\n      <?php if (isset($_GET[\'reset\']) && $_GET[\'reset\'] === \'sent\'): ?>\n        <div class=\"ms-success\">\n          Password reset email has been sent.\n        </div>\n      <?php endif; ?>\n\n      <form method=\"post\">\n        <input type=\"email\" name=\"user_login\" placeholder=\"Email address\" required>\n        <button type=\"submit\">Send reset link</button>\n      </form>\n\n      <a href=\"<?php echo esc_url(home_url(\'/login/\')); ?>\">\n        Back to login\n      </a>\n\n    </div>\n  </div>\n\n  <?php\n  return ob_get_clean();\n});\nadd_action(\'init\', function () {\n\n  if (!empty($_POST[\'user_login\'])) {\n\n    $user = sanitize_text_field($_POST[\'user_login\']);\n\n    retrieve_password($user);\n\n    wp_safe_redirect(home_url(\'/forgot-password/?reset=sent\'));\n    exit;\n  }\n\n});','把 WordPress 預設 reset password 頁面 → 改成 Momentry UI','global',0,10,1,'2026-05-07 06:13:49',1,NULL),
(54,'API_Test_SC','<p>可以把 Momentry API 全部在這裡快速測試</p>','add_action(\'rest_api_init\', function () {\n  register_rest_route(\'momentry/v1\', \'/api-test\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_test_proxy\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n});\n\nfunction momentry_api_test_proxy(WP_REST_Request $request) {\n  $base = \'http://192.168.110.201:3002\';\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $file = \'3abeee81d94597629ed8cb943f182e94\';\n  $test_file = \'test_file_uuid\';\n  $test_identity = \'test_identity_uuid\';\n\n  $allowed = [\n    // 1. Core / System\n    \'health\' => [\'GET\', \'/health\', \'json\'],\n    \'health_detailed\' => [\'GET\', \'/health/detailed\', \'json\'],\n    \'auth_login_test\' => [\'POST\', \'/api/v1/auth/login\', \'json\'],\n    \'auth_logout\' => [\'POST\', \'/api/v1/auth/logout\', \'json\'],\n    \'stats_ingest\' => [\'GET\', \'/api/v1/stats/ingest\', \'json\'],\n    \'stats_sftpgo\' => [\'GET\', \'/api/v1/stats/sftpgo\', \'json\'],\n    \'stats_inference\' => [\'GET\', \'/api/v1/stats/inference\', \'json\'],\n\n    // 2. File Management\n    \'files_register\' => [\'POST\', \'/api/v1/files/register\', \'json\'],\n    \'unregister\' => [\'POST\', \'/api/v1/unregister\', \'json\'],\n    \'files_scan\' => [\'GET\', \'/api/v1/files/scan\', \'json\'],\n    \'file_probe\' => [\'GET\', \"/api/v1/file/$file/probe\", \'json\'],\n    \'file_process\' => [\'POST\', \"/api/v1/file/$test_file/process\", \'json\'],\n    \'file_chunks\' => [\'GET\', \"/api/v1/file/$file/chunks\", \'json\'],\n    \'progress\' => [\'GET\', \"/api/v1/progress/$file\", \'json\'],\n    \'jobs\' => [\'GET\', \'/api/v1/jobs\', \'json\'],\n    \'config_cache\' => [\'POST\', \'/api/v1/config/cache\', \'json\'],\n\n    // 3. Visual Search\n    \'search_visual\' => [\'POST\', \'/api/v1/search/visual\', \'json\'],\n    \'search_visual_class\' => [\'POST\', \'/api/v1/search/visual/class\', \'json\'],\n    \'search_visual_density\' => [\'POST\', \'/api/v1/search/visual/density\', \'json\'],\n    \'search_visual_combination\' => [\'POST\', \'/api/v1/search/visual/combination\', \'json\'],\n    \'search_visual_stats\' => [\'POST\', \'/api/v1/search/visual/stats\', \'json\'],\n\n    // 4. File / Identity\n    \'files\' => [\'GET\', \'/api/v1/files?page=1&page_size=5\', \'json\'],\n    \'file_detail\' => [\'GET\', \"/api/v1/file/$file\", \'json\'],\n    \'file_identities\' => [\'GET\', \"/api/v1/file/$file/identities\", \'json\'],\n    \'identities\' => [\'GET\', \'/api/v1/identities?page=1&page_size=5\', \'json\'],\n    \'identity_create\' => [\'POST\', \'/api/v1/identity\', \'json\'],\n    \'identity_detail\' => [\'GET\', \"/api/v1/identity/$test_identity\", \'json\'],\n    \'identity_delete\' => [\'DELETE\', \"/api/v1/identity/$test_identity\", \'json\'],\n    \'identity_files\' => [\'GET\', \"/api/v1/identity/$test_identity/files\", \'json\'],\n    \'identity_chunks\' => [\'GET\', \"/api/v1/identity/$test_identity/chunks\", \'json\'],\n    \'resource_register\' => [\'POST\', \'/api/v1/resource/register\', \'json\'],\n    \'resource_heartbeat\' => [\'POST\', \'/api/v1/resource/heartbeat\', \'json\'],\n    \'resources\' => [\'GET\', \'/api/v1/resources\', \'json\'],\n\n    // 5. Identity Binding\n    \'identity_bind\' => [\'POST\', \"/api/v1/identity/$test_identity/bind\", \'json\'],\n    \'identity_unbind\' => [\'POST\', \"/api/v1/identity/$test_identity/unbind\", \'json\'],\n    \'identity_merge\' => [\'POST\', \"/api/v1/identity/$test_identity/mergeinto\", \'json\'],\n\n    // 6. Face Candidates\n    \'faces_candidates\' => [\'GET\', \'/api/v1/faces/candidates?page=1&page_size=5\', \'json\'],\n\n    // 7. Search\n    \'search_smart\' => [\'POST\', \'/api/v1/search/smart\', \'json\'],\n    \'search_universal\' => [\'POST\', \'/api/v1/search/universal\', \'json\'],\n    \'search_frames\' => [\'POST\', \'/api/v1/search/frames\', \'json\'],\n\n    // 8. Trace\n    \'face_trace_sortby\' => [\'POST\', \"/api/v1/file/$file/face_trace/sortby\", \'json\'],\n    \'trace_faces\' => [\'GET\', \"/api/v1/file/$file/trace/2/faces?limit=2&interpolate=true\", \'json\'],\n\n    // 9. Media\n    \'thumbnail\' => [\'GET\', \"/api/v1/file/$file/thumbnail?frame=4650\", \'binary\'],\n    \'video_stream\' => [\'GET\', \"/api/v1/file/$file/video\", \'binary\'],\n    \'video_bbox\' => [\'GET\', \"/api/v1/file/$file/video/bbox?start=1&end=3&duration=2\", \'binary\'],\n    \'trace_video\' => [\'GET\', \"/api/v1/file/$file/trace/2/video\", \'binary\'],\n\n    // 10. Identity Delete duplicate item in dictionary\n    \'identity_delete_full\' => [\'DELETE\', \"/api/v1/identity/$test_identity\", \'json\'],\n\n    // 11. Agents\n    \'translate\' => [\'POST\', \'/api/v1/agents/translate\', \'json\'],\n    \'agent_5w1h_analyze\' => [\'POST\', \'/api/v1/agents/5w1h/analyze\', \'json\'],\n    \'agent_5w1h_batch\' => [\'POST\', \'/api/v1/agents/5w1h/batch\', \'json\'],\n    \'agent_5w1h_status\' => [\'GET\', \'/api/v1/agents/5w1h/status\', \'json\'],\n    \'agent_identity_analyze\' => [\'POST\', \'/api/v1/agents/identity/analyze\', \'json\'],\n    \'agent_identity_status\' => [\'GET\', \'/api/v1/agents/identity/status\', \'json\'],\n    \'agent_identity_suggest\' => [\'POST\', \'/api/v1/agents/identity/suggest\', \'json\'],\n    \'agent_suggest_merge\' => [\'POST\', \'/api/v1/agents/suggest/merge\', \'json\'],\n    \'agent_suggest_clustering\' => [\'POST\', \'/api/v1/agents/suggest/clustering\', \'json\'],\n  ];\n\n  $api = sanitize_text_field($request->get_param(\'api\'));\n  $body = $request->get_param(\'body\');\n\n  if (!isset($allowed[$api])) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'api\' => $api,\n      \'message\' => \'API not allowed\'\n    ], 400);\n  }\n\n  [$method, $path, $response_type] = $allowed[$api];\n  $url = $base . $path;\n\n  $headers = [\n    \'X-API-Key\' => $api_key,\n    \'Accept\' => \'application/json\'\n  ];\n\n  if ($response_type === \'binary\') {\n    $headers[\'Range\'] = \'bytes=0-2048\';\n  }\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 20,\n    \'headers\' => $headers\n  ];\n\n  if (in_array($method, [\'POST\', \'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = json_encode($body ?: []);\n  }\n\n  $start = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($response)) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'api\' => $api,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'url\' => $url,\n      \'latency_ms\' => $latency_ms,\n      \'message\' => $response->get_error_message()\n    ], 500);\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n\n  if ($response_type === \'binary\') {\n    $data = [\n      \'type\' => \'binary_or_stream\',\n      \'content_type\' => $content_type,\n      \'sample_bytes\' => strlen($body_raw),\n      \'note\' => \'Binary response detected. Body is intentionally not displayed.\'\n    ];\n  } else {\n    $data = $json ?? $body_raw;\n  }\n\n  return [\n    \'ok\' => $http_code >= 200 && $http_code < 300,\n    \'api\' => $api,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'response_type\' => $response_type,\n    \'data\' => $data\n  ];\n}\n\nadd_shortcode(\'momentry_api_dashboard\', function () {\n  if (!current_user_can(\'manage_options\')) {\n    return \'<p style=\"color:red;\">Admin only.</p>\';\n  }\n\n  ob_start();\n  ?>\n\n<div id=\"momentry-api-dashboard\">\n  <h2>Momentry API Dashboard</h2>\n  <p>Core API validation console. Safe APIs can run all. POST / Media / Dangerous checks are manual.</p>\n\n  <div class=\"metrics\">\n    <div class=\"metric-card\">\n      <div class=\"metric-label\">Coverage</div>\n      <div class=\"metric-value\" id=\"coverageText\">Loading...</div>\n      <div class=\"metric-note\">API Dictionary total: 56 endpoints.</div>\n    </div>\n    <div class=\"metric-card\">\n      <div class=\"metric-label\">Run Summary</div>\n      <div class=\"metric-value\" id=\"summary\">Ready</div>\n      <div class=\"metric-note\">Latency &gt; 500ms will be marked orange.</div>\n    </div>\n  </div>\n\n  <div class=\"topbar\">\n    <button id=\"runSafeBtn\">Run Safe APIs</button>\n    <button id=\"runPostBtn\">Run POST Tests</button>\n    <button id=\"runMediaBtn\">Run Media APIs</button>\n  </div>\n\n  <div class=\"search-demo\">\n    <h3>Search Demo</h3>\n    <div class=\"search-row\">\n      <input id=\"searchQueryInput\" type=\"text\" value=\"name\" placeholder=\"Enter search query...\" />\n      <select id=\"searchModeSelect\">\n        <option value=\"search_universal\">Universal Search</option>\n        <option value=\"search_smart\">Smart Search</option>\n        <option value=\"search_visual\">Visual Search</option>\n        <option value=\"search_frames\">Frame Search</option>\n      </select>\n      <button id=\"runSearchDemoBtn\">Run Search</button>\n    </div>\n  </div>\n\n  <h3>Response</h3>\n  <pre id=\"apiResult\">Click Run to test an API.</pre>\n\n  <h3>Safe APIs</h3>\n  <div class=\"api-grid\" id=\"safeGrid\"></div>\n\n  <h3>POST Test APIs</h3>\n  <div class=\"api-grid\" id=\"postGrid\"></div>\n\n  <h3>Media APIs</h3>\n  <div class=\"api-grid\" id=\"mediaGrid\"></div>\n\n  <h3>Dangerous APIs — Safe Check Only</h3>\n  <div class=\"api-grid\" id=\"dangerGrid\"></div>\n</div>\n\n<style>\nbody { background:#020617; }\n\n#momentry-api-dashboard {\n  max-width: 1220px;\n  margin: 40px auto;\n  padding: 24px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  color: #eaf2ff;\n}\n\n#momentry-api-dashboard h2 {\n  font-size: 32px;\n  margin-bottom: 8px;\n  color: #fff;\n}\n\n#momentry-api-dashboard h3 {\n  margin-top: 30px;\n  color: #fff;\n}\n\n#momentry-api-dashboard p {\n  color: #9fb3d1;\n}\n\n.metrics {\n  display:grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap:14px;\n  margin:20px 0;\n}\n\n.metric-card {\n  background:#0f172a;\n  border:1px solid #1e293b;\n  border-radius:18px;\n  padding:18px;\n}\n\n.metric-label {\n  color:#94a3b8;\n  font-size:13px;\n  font-weight:700;\n}\n\n.metric-value {\n  margin-top:6px;\n  color:#fff;\n  font-size:24px;\n  font-weight:800;\n}\n\n.metric-note {\n  margin-top:6px;\n  color:#94a3b8;\n  font-size:12px;\n}\n\n.topbar {\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  gap:12px;\n  margin: 20px 0;\n}\n\n.search-demo {\n  margin: 22px 0;\n  padding:18px;\n  border-radius:18px;\n  background:#0f172a;\n  border:1px solid #1e293b;\n}\n\n.search-demo h3 {\n  margin-top:0 !important;\n}\n\n.search-row {\n  display:grid;\n  grid-template-columns: 1.5fr .9fr auto;\n  gap:12px;\n}\n\n.search-row input,\n.search-row select {\n  border:1px solid #334155;\n  background:#020617;\n  color:#eaf2ff;\n  border-radius:999px;\n  padding:10px 14px;\n}\n\n.api-grid {\n  display: grid;\n  gap: 12px;\n  margin-top: 14px;\n}\n\n.api-card {\n  display: grid;\n  grid-template-columns: 1.4fr .7fr 2.4fr 1.2fr .8fr;\n  gap: 12px;\n  align-items: center;\n  padding: 16px;\n  border-radius: 16px;\n  background: #0f172a;\n  border: 1px solid #1e293b;\n}\n\n.api-card.fail-card {\n  border-color:#7f1d1d;\n  background:#1f1115;\n}\n\n.api-card.slow-card {\n  border-color:#92400e;\n  background:#1f1a10;\n}\n\n.api-name {\n  font-weight: 700;\n  color: #fff;\n}\n\n.api-method {\n  font-size: 12px;\n  color: #38bdf8;\n  font-weight: 700;\n}\n\n.api-path {\n  font-family: monospace;\n  font-size: 13px;\n  color: #cbd5f5;\n  word-break: break-all;\n}\n\n.api-status {\n  font-weight: 800;\n  font-size: 13px;\n}\n\n.api-status.ok { color: #22c55e; }\n.api-status.fail { color: #ef4444; }\n.api-status.idle { color: #94a3b8; }\n.api-status.warn { color: #f59e0b; }\n.api-status.slow { color: #fb923c; }\n\nbutton {\n  border: 0;\n  border-radius: 999px;\n  padding: 9px 16px;\n  background: #2563eb;\n  color: #fff;\n  cursor: pointer;\n  font-weight: 700;\n}\n\nbutton:hover { background:#3b82f6; }\n\n#apiResult {\n  position: sticky;\n  top: 16px;\n  z-index: 5;\n  margin-top: 12px;\n  padding: 18px;\n  border-radius: 16px;\n  background: #020617;\n  border: 1px solid #334155;\n  color: #cbd5f5;\n  white-space: pre-wrap;\n  overflow: auto;\n  max-height: 420px;\n}\n</style>\n\n<script>\nconst FILE_UUID = \"3abeee81d94597629ed8cb943f182e94\";\nconst COVERAGE_TARGET = 56;\nconst SLOW_MS = 500;\nlet apiResults = {};\n\nconst safeApis = [\n  [\"health\",\"GET\",\"/health\"],\n  [\"health_detailed\",\"GET\",\"/health/detailed\"],\n  [\"stats_ingest\",\"GET\",\"/api/v1/stats/ingest\"],\n  [\"stats_sftpgo\",\"GET\",\"/api/v1/stats/sftpgo\"],\n  [\"stats_inference\",\"GET\",\"/api/v1/stats/inference\"],\n  [\"files_scan\",\"GET\",\"/api/v1/files/scan\"],\n  [\"files\",\"GET\",\"/api/v1/files\"],\n  [\"file_detail\",\"GET\",\"/api/v1/file/{FILE}\"],\n  [\"file_probe\",\"GET\",\"/api/v1/file/{FILE}/probe\"],\n  [\"file_chunks\",\"GET\",\"/api/v1/file/{FILE}/chunks\"],\n  [\"progress\",\"GET\",\"/api/v1/progress/{FILE}\"],\n  [\"jobs\",\"GET\",\"/api/v1/jobs\"],\n  [\"identities\",\"GET\",\"/api/v1/identities\"],\n  [\"file_identities\",\"GET\",\"/api/v1/file/{FILE}/identities\"],\n  [\"identity_detail\",\"GET\",\"/api/v1/identity/{identity_uuid}\"],\n  [\"identity_files\",\"GET\",\"/api/v1/identity/{identity_uuid}/files\"],\n  [\"identity_chunks\",\"GET\",\"/api/v1/identity/{identity_uuid}/chunks\"],\n  [\"faces_candidates\",\"GET\",\"/api/v1/faces/candidates\"],\n  [\"resources\",\"GET\",\"/api/v1/resources\"],\n  [\"agent_5w1h_status\",\"GET\",\"/api/v1/agents/5w1h/status\"],\n  [\"agent_identity_status\",\"GET\",\"/api/v1/agents/identity/status\"],\n];\n\nconst postApis = [\n  [\"auth_login_test\",\"POST\",\"/api/v1/auth/login\",{username:\"test\",password:\"test\"}],\n  [\"search_visual\",\"POST\",\"/api/v1/search/visual\",{\n    uuid:FILE_UUID,\n    limit:5,\n    criteria:{\n      required_classes:[\"person\"],\n      class_counts:{person:[1,999]}\n    }\n  }],\n  [\"search_visual_class\",\"POST\",\"/api/v1/search/visual/class\",{class_name:\"person\",limit:2,uuid:FILE_UUID}],\n  [\"search_visual_density\",\"POST\",\"/api/v1/search/visual/density\",{density:\"high\",limit:2,uuid:FILE_UUID}],\n  [\"search_visual_combination\",\"POST\",\"/api/v1/search/visual/combination\",{query:\"person\",classes:[\"person\"],limit:2,uuid:FILE_UUID}],\n  [\"search_visual_stats\",\"POST\",\"/api/v1/search/visual/stats\",{uuid:FILE_UUID}],\n  [\"search_smart\",\"POST\",\"/api/v1/search/smart\",{query:\"name\",limit:2,uuid:FILE_UUID}],\n  [\"search_universal\",\"POST\",\"/api/v1/search/universal\",{query:\"name\",limit:2,mode:\"bm25\",uuid:FILE_UUID}],\n  [\"search_frames\",\"POST\",\"/api/v1/search/frames\",{query:\"person\",limit:2,uuid:FILE_UUID}],\n  [\"face_trace_sortby\",\"POST\",\"/api/v1/file/{FILE}/face_trace/sortby\",{sort_by:\"face_count\",limit:2}],\n  [\"translate\",\"POST\",\"/api/v1/agents/translate\",{text:\"Hello world\",target_language:\"zh-TW\"}],\n  [\"agent_5w1h_analyze\",\"POST\",\"/api/v1/agents/5w1h/analyze\",{text:\"Hello world\"}],\n  [\"agent_5w1h_batch\",\"POST\",\"/api/v1/agents/5w1h/batch\",{items:[{text:\"Hello world\"}]}],\n  [\"agent_identity_analyze\",\"POST\",\"/api/v1/agents/identity/analyze\",{file_uuid:FILE_UUID}],\n  [\"agent_identity_suggest\",\"POST\",\"/api/v1/agents/identity/suggest\",{file_uuid:FILE_UUID}],\n  [\"agent_suggest_merge\",\"POST\",\"/api/v1/agents/suggest/merge\",{file_uuid:FILE_UUID}],\n  [\"agent_suggest_clustering\",\"POST\",\"/api/v1/agents/suggest/clustering\",{file_uuid:FILE_UUID}],\n];\n\nconst mediaApis = [\n  [\"trace_faces\",\"GET\",\"/api/v1/file/{FILE}/trace/2/faces\"],\n  [\"thumbnail\",\"GET\",\"/api/v1/file/{FILE}/thumbnail\"],\n  [\"video_stream\",\"GET\",\"/api/v1/file/{FILE}/video\"],\n  [\"video_bbox\",\"GET\",\"/api/v1/file/{FILE}/video/bbox\"],\n  [\"trace_video\",\"GET\",\"/api/v1/file/{FILE}/trace/2/video\"],\n];\n\nconst dangerousApis = [\n  [\"auth_logout\",\"POST\",\"/api/v1/auth/logout\"],\n  [\"config_cache\",\"POST\",\"/api/v1/config/cache\"],\n  [\"files_register\",\"POST\",\"/api/v1/files/register\"],\n  [\"unregister\",\"POST\",\"/api/v1/unregister\"],\n  [\"file_process\",\"POST\",\"/api/v1/file/{FILE}/process\"],\n  [\"identity_create\",\"POST\",\"/api/v1/identity\"],\n  [\"identity_delete\",\"DELETE\",\"/api/v1/identity/{identity_uuid}\"],\n  [\"identity_delete_full\",\"DELETE\",\"/api/v1/identity/{identity_uuid}\"],\n  [\"identity_bind\",\"POST\",\"/api/v1/identity/{identity_uuid}/bind\"],\n  [\"identity_unbind\",\"POST\",\"/api/v1/identity/{identity_uuid}/unbind\"],\n  [\"identity_merge\",\"POST\",\"/api/v1/identity/{identity_uuid}/mergeinto\"],\n  [\"resource_register\",\"POST\",\"/api/v1/resource/register\"],\n  [\"resource_heartbeat\",\"POST\",\"/api/v1/resource/heartbeat\"],\n];\n\nconst allApis = [...safeApis, ...postApis, ...mediaApis, ...dangerousApis];\n\nconst safeGrid = document.getElementById(\"safeGrid\");\nconst postGrid = document.getElementById(\"postGrid\");\nconst mediaGrid = document.getElementById(\"mediaGrid\");\nconst dangerGrid = document.getElementById(\"dangerGrid\");\nconst apiResult = document.getElementById(\"apiResult\");\nconst summary = document.getElementById(\"summary\");\nconst coverageText = document.getElementById(\"coverageText\");\n\ncoverageText.textContent = `${allApis.length} / ${COVERAGE_TARGET}`;\n\nfunction renderCards(list, grid, mode) {\n  list.forEach(api => {\n    const [key, method, path] = api;\n    const card = document.createElement(\"div\");\n    card.className = \"api-card\";\n    card.innerHTML = `\n      <div class=\"api-name\">${key}</div>\n      <div class=\"api-method\">${method}</div>\n      <div class=\"api-path\">${path}</div>\n      <div class=\"api-status idle\" id=\"status-${key}\">Idle</div>\n      <button data-api=\"${key}\" data-mode=\"${mode}\">\n        ${mode === \"danger\" ? \"Safe Check\" : \"Run\"}\n      </button>\n    `;\n    grid.appendChild(card);\n  });\n}\n\nrenderCards(safeApis, safeGrid, \"safe\");\nrenderCards(postApis, postGrid, \"post\");\nrenderCards(mediaApis, mediaGrid, \"media\");\nrenderCards(dangerousApis, dangerGrid, \"danger\");\n\nfunction findApi(key) {\n  return allApis.find(a => a[0] === key);\n}\n\nfunction classify(data, mode = \"\") {\n  const text = JSON.stringify(data.data || \"\").toLowerCase();\n\n  if (data.http_code >= 200 && data.http_code < 300) {\n    if (data.latency_ms > SLOW_MS) return [\"SLOW\", \"slow\", true];\n    return [\"OK\", \"ok\", true];\n  }\n\n  if (mode === \"danger\" && [400, 404, 405, 422].includes(data.http_code)) {\n    return [\"SAFE CHECK\", \"warn\", false];\n  }\n\n  if (data.http_code === 401) return [\"AUTH\", \"fail\", false];\n  if (data.http_code === 404) return [\"BROKEN\", \"fail\", false];\n\n  if (\n    text.includes(\"ollama\") ||\n    text.includes(\"llm\") ||\n    text.includes(\"inference\") ||\n    text.includes(\"embedding\") ||\n    text.includes(\"visual\") ||\n    text.includes(\"localhost:11434\") ||\n    text.includes(\"localhost:8081\")\n  ) {\n    return [\"NOT READY\", \"warn\", false];\n  }\n\n  if (data.http_code === 400 || data.http_code === 422) {\n    return [\"ALIVE\", \"warn\", false];\n  }\n\n  if (data.latency_ms > SLOW_MS) return [\"SLOW FAIL\", \"slow\", false];\n\n  return [\"FAIL\", \"fail\", false];\n}\n\nasync function runApi(key, customBody = null, mode = \"\") {\n  const api = findApi(key);\n  const status = document.getElementById(\"status-\" + key);\n  const card = status.closest(\".api-card\");\n\n  const body = customBody !== null ? customBody : (api[3] || {});\n  status.textContent = \"Running\";\n  status.className = \"api-status idle\";\n  card.classList.remove(\"fail-card\", \"slow-card\");\n\n  const res = await fetch(\"/wp-json/momentry/v1/api-test\", {\n    method: \"POST\",\n    headers: {\"Content-Type\": \"application/json\"},\n    body: JSON.stringify({ api: key, body })\n  });\n\n  const data = await res.json();\n  const [label, cls, isOk] = classify(data, mode);\n\n  status.textContent = `${label} · ${data.http_code || \"-\"} / ${data.latency_ms || \"-\"}ms`;\n  status.className = \"api-status \" + cls;\n\n  if (!isOk && cls === \"fail\") card.classList.add(\"fail-card\");\n  if (cls === \"slow\") card.classList.add(\"slow-card\");\n\n  apiResults[key] = { ok: isOk, label, http_code: data.http_code, latency_ms: data.latency_ms };\n  return data;\n}\n\ndocument.addEventListener(\"click\", async (e) => {\n  if (!e.target.matches(\"button[data-api]\")) return;\n\n  const key = e.target.dataset.api;\n  const mode = e.target.dataset.mode;\n\n  apiResult.textContent = \"Running \" + key + \"...\";\n\n  try {\n    const data = await runApi(key, null, mode);\n    apiResult.textContent = JSON.stringify(data, null, 2);\n  } catch (err) {\n    apiResult.textContent = err.message;\n  }\n});\n\nasync function runGroup(list, label, mode = \"\") {\n  let ok = 0, warn = 0, fail = 0, slow = 0;\n  summary.textContent = `Running ${label}...`;\n\n  for (const api of list) {\n    try {\n      const data = await runApi(api[0], null, mode);\n      const classified = apiResults[api[0]];\n\n      if (classified.label === \"SLOW\") slow++;\n      else if (classified.ok) ok++;\n      else if ([\"ALIVE\", \"NOT READY\", \"SAFE CHECK\"].includes(classified.label)) warn++;\n      else fail++;\n    } catch (err) {\n      fail++;\n    }\n  }\n\n  summary.textContent = `✅ ${ok} OK / 🟧 ${slow} SLOW / ⚠️ ${warn} WARN / ❌ ${fail} FAIL`;\n}\n\ndocument.getElementById(\"runSafeBtn\").onclick = () => runGroup(safeApis, \"Safe APIs\", \"safe\");\ndocument.getElementById(\"runPostBtn\").onclick = () => runGroup(postApis, \"POST APIs\", \"post\");\ndocument.getElementById(\"runMediaBtn\").onclick = () => runGroup(mediaApis, \"Media APIs\", \"media\");\n\ndocument.getElementById(\"runSearchDemoBtn\").onclick = async () => {\n  const query = document.getElementById(\"searchQueryInput\").value || \"name\";\n  const mode = document.getElementById(\"searchModeSelect\").value;\n\n  let body;\n\n  if (mode === \"search_visual\") {\n    body = {\n      uuid: FILE_UUID,\n      limit: 5,\n      criteria: {\n        required_classes: [query],\n        class_counts: {\n          [query]: [1, 999]\n        }\n      }\n    };\n  } else if (mode === \"search_frames\") {\n    body = {\n      query,\n      limit: 5,\n      uuid: FILE_UUID\n    };\n  } else if (mode === \"search_smart\") {\n    body = {\n      query,\n      limit: 5,\n      uuid: FILE_UUID\n    };\n  } else {\n    body = {\n      query,\n      limit: 5,\n      mode: \"bm25\",\n      uuid: FILE_UUID\n    };\n  }\n\n  apiResult.textContent = `Running Search Demo: ${mode} / ${query}...`;\n\n  try {\n    const data = await runApi(mode, body, \"post\");\n    apiResult.textContent = JSON.stringify(data, null, 2);\n  } catch (err) {\n    apiResult.textContent = err.message;\n  }\n};\n</script>\n\n  <?php\n  return ob_get_clean();\n});','可以把 Momentry API 全部在這裡快速測試','global',0,10,1,'2026-05-27 02:08:22',1,NULL),
(55,'LT-檔案管理-註冊','','/**\n * LT People Files - Load real Momentry backend files\n * 只作用在 lt-people-files 页面\n * 使用真实 Scan API + Thumbnail/Video Proxy\n */\n\nadd_action(\'wp_footer\', function () {\n\n  if (!is_page() || strpos($_SERVER[\'REQUEST_URI\'], \'/library\') === false) return;\n\n  echo \'<script>console.log(\"LT FILES SNIPPET LOADED\");</script>\';\n  ?>\n\n  <script>\n  (function(){\n\n    // 防止其他旧代码呼叫 renderFinderRows 报错\n    if (typeof window.renderFinderRows !== \'function\') {\n      window.renderFinderRows = function(){};\n    }\n\n    function initPeopleFilesMediaLoader(){\n      const root = document.getElementById(\'ms-files-page\');\n      if (!root) return false;\n\n      const grid = root.querySelector(\'#mpGrid\');\n      const status = root.querySelector(\'#mpStatus\');\n\n      if (!grid) return false;\n\n      if (root.dataset.mediaLoaded === \'1\' || root.dataset.mediaLoading === \'1\') {\n        return true;\n      }\n\n      root.dataset.mediaLoading = \'1\';\n      root.dataset.mediaLoaded = \'1\';\n\n      const filterBtn = root.querySelector(\'#mpToggleFilter\');\n      const filterPop = root.querySelector(\'#mpFilterPop\');\n\n      const showAll = root.querySelector(\'#mpShowAll\');\n		\n      const showVideos = root.querySelector(\'#mpShowVideos\');\n      const showDocs = root.querySelector(\'#mpShowDocs\');\n		function getDisplayFilter(){\n  const checked = root.querySelector(\'input[name=\"mp-display-filter\"]:checked\');\n  return checked ? checked.value : \'video\';\n}\n\n      const onlyPhotos = root.querySelector(\'#mpOnlyPhotos\');\n      const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n      const searchInput = root.querySelector(\'#mpSearchInput\');\n\n      const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n      const addToPeopleBtn = root.querySelector(\'#mpAddToPeople\');\n\n      const selectAllBtn = root.querySelector(\'#mpSelectAll\');\n      const selectVideosBtn = root.querySelector(\'#mpSelectVideos\');\n      const selectDocsBtn = root.querySelector(\'#mpSelectDocs\');\n      const clearSelectedBtn = root.querySelector(\'#mpClearSelected\');\n\n      const REGISTER_STORE_KEY = \'lt_people_files_demo_status_v5_full_flow\';\n\n      const DEMO_FAILED_FILE_KEYWORDS = [\n        \'e2e_v2_1779000223.mp4\',\n        \'view26.jpg\',\n        \'view24.jpg\',\n        \'Charade_YouTube_H264.mp4\',\n        \'DEMO_FAIL\'\n      ];\n\n      const MOMENTRY_API_BASE = \'http://192.168.110.201:3002\';\n      const MOMENTRY_API_KEY = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      const MEDIA_API = MOMENTRY_API_BASE + \'/api/v1/files/scan\';\n\n      let allItems = [];\n\n      function getFileAssetUrl(fileUuid, type, tStart){\n  if (!fileUuid) return \'\';\n\n  let url = window.location.origin\n    + \'/wp-json/momentry/v1/media?uuid=\'\n    + encodeURIComponent(fileUuid)\n    + \'&type=\'\n    + encodeURIComponent(type);\n\n  if (type === \'thumbnail\') {\n    const FPS = 24;\n    const frame = Math.max(0, Math.round(Number(tStart || 0) * FPS));\n    url += \'&frame=\' + encodeURIComponent(frame);\n  }\n\n  return url;\n}\n\n      function ensureDemoStatusStyle(){\n        if (document.getElementById(\'lt-files-demo-status-style-v5\')) return;\n\n        const style = document.createElement(\'style\');\n        style.id = \'lt-files-demo-status-style-v5\';\n        style.textContent = `\n         /* 不反白、不变淡：Registered / Processing / Probed / Failed 都正常显示 */\n#ms-files-page .mp-file-card.is-dimmed .mp-thumb-wrap,\n#ms-files-page .mp-file-card.is-dimmed .mp-meta,\n#ms-files-page .mp-file-card.is-processing .mp-thumb-wrap,\n#ms-files-page .mp-file-card.is-failed .mp-thumb-wrap{\n  opacity:1 !important;\n}\n\n          #ms-files-page .mp-file-card .mp-checkmark,\n          #ms-files-page .mp-file-card.is-selected .mp-checkmark{\n            display:none !important;\n          }\n\n          #ms-files-page .mp-file-card.is-selected .mp-thumb-wrap{\n            border-color:#7db9ff !important;\n            background:#eaf4ff !important;\n            box-shadow:0 0 0 3px rgba(125,185,255,.55) inset !important;\n          }\n\n          #ms-files-page .mp-file-card.is-selected .mp-thumb-wrap::after{\n            content:\"\";\n            position:absolute;\n            inset:0;\n            background:rgba(125,185,255,.18);\n            border-radius:12px;\n            pointer-events:none;\n            z-index:3;\n          }\n\n          #ms-files-page .mp-file-card.is-selected .mp-doc-thumb{\n            background:linear-gradient(180deg,#eef7ff,#dceeff) !important;\n          }\n\n          #ms-files-page .mp-register-status{\n            display:inline-flex;\n            align-items:center;\n            justify-content:center;\n            margin-top:6px;\n            padding:3px 8px;\n            border-radius:999px;\n            font-size:10px;\n            line-height:1;\n            font-weight:700;\n            letter-spacing:.3px;\n            border:1px solid #e5e7eb;\n            background:#f7f8fa;\n            color:#6b7280;\n          }\n\n          #ms-files-page .mp-register-status.st-unregistered{\n            background:#f7f8fa;\n            border-color:#e5e7eb;\n            color:#8a919c;\n          }\n\n          #ms-files-page .mp-register-status.st-registered,\n          #ms-files-page .mp-register-status.st-probed{\n            background:#f5f7fb;\n            border-color:#dde3ef;\n            color:#6b7280;\n          }\n\n          #ms-files-page .mp-register-status.st-processing{\n            background:#eef6ff;\n            border-color:#cfe5ff;\n            color:#2f6ea3;\n          }\n\n          #ms-files-page .mp-register-status.st-failed{\n            background:#fff5f5;\n            border-color:#ffd2d2;\n            color:#d11f1f;\n          }\n\n          #ms-files-page .mp-register-status.st-completed{\n            background:#eef8f1;\n            border-color:#cfead7;\n            color:#2f7d46;\n          }\n\n          #ms-files-page .mp-complete-mark{\n            position:absolute;\n            right:10px;\n            bottom:10px;\n            width:28px;\n            height:28px;\n            border-radius:50%;\n            background:rgba(17,24,39,.78);\n            color:#fff;\n            display:none;\n            align-items:center;\n            justify-content:center;\n            font-weight:700;\n            z-index:5;\n          }\n\n          #ms-files-page .mp-file-card.is-completed .mp-complete-mark{\n            display:flex !important;\n          }\n\n          #ms-files-page .mp-failed-mark{\n            position:absolute;\n            right:10px;\n            bottom:10px;\n            width:28px;\n            height:28px;\n            border-radius:50%;\n            background:#ffd93d;\n            color:#1f2937;\n            display:none;\n            align-items:center;\n            justify-content:center;\n            font-size:20px;\n            font-weight:900;\n            z-index:6;\n            border:2px solid #1f2937;\n            box-shadow:0 3px 8px rgba(0,0,0,.16);\n          }\n\n          #ms-files-page .mp-file-card.is-failed .mp-failed-mark{\n            display:flex !important;\n          }\n\n          #ms-files-page .mp-demo-modal-mask{\n            position:fixed;\n            inset:0;\n            background:rgba(0,0,0,.18);\n            z-index:99999;\n            display:flex;\n            align-items:center;\n            justify-content:center;\n          }\n\n          #ms-files-page .mp-demo-modal{\n            width:min(430px, calc(100vw - 40px));\n            min-height:190px;\n            background:#fff;\n            border-radius:20px;\n            box-shadow:0 18px 44px rgba(0,0,0,.14);\n            display:flex;\n            flex-direction:column;\n            align-items:center;\n            justify-content:center;\n            padding:34px 32px 30px;\n            text-align:center;\n          }\n\n          #ms-files-page .mp-demo-modal-title{\n            font-size:18px;\n            font-weight:600;\n            color:#34383f;\n            margin-bottom:30px;\n            line-height:1.5;\n          }\n\n          #ms-files-page .mp-demo-modal-actions{\n            display:flex;\n            align-items:center;\n            justify-content:center;\n            gap:14px;\n          }\n\n          #ms-files-page .mp-demo-btn{\n            min-width:88px;\n            height:42px;\n            border-radius:10px;\n            border:1px solid #d7dbe2;\n            background:#fff;\n            color:#4b5563;\n            font-size:15px;\n            font-weight:600;\n            cursor:pointer;\n            box-shadow:0 3px 8px rgba(0,0,0,.08);\n          }\n\n          #ms-files-page .mp-demo-btn-primary{\n            border-color:#3b73d9;\n            background:#3b73d9;\n            color:#fff;\n          }\n\n          #ms-files-page .mp-demo-progress-wrap{\n            width:260px;\n            height:6px;\n            border-radius:999px;\n            background:#d9d9d9;\n            overflow:hidden;\n          }\n\n          #ms-files-page .mp-demo-progress-bar{\n            width:0%;\n            height:100%;\n            border-radius:999px;\n            background:#4f8fd8;\n            transition:width 1.8s ease;\n          }\n\n									   #ms-files-page .mp-thumb-wrap{\n  position:relative !important;\n  overflow:hidden !important;\n}\n\n#ms-files-page .mp-thumb-wrap img.mp-auth-thumb{\n  width:100% !important;\n  height:100% !important;\n  min-height:140px !important;\n  object-fit:cover !important;\n  display:block !important;\n  border-radius:12px !important;\n}\n        `;\n        document.head.appendChild(style);\n      }\n\n      function showDemoModal(options){\n        options = options || {};\n\n        return new Promise(function(resolve){\n          const oldMask = root.querySelector(\'.mp-demo-modal-mask\');\n          if (oldMask) oldMask.remove();\n\n          const mask = document.createElement(\'div\');\n          mask.className = \'mp-demo-modal-mask\';\n\n          const okOnly = !!options.okOnly;\n\n          mask.innerHTML = `\n            <div class=\"mp-demo-modal\">\n              <div class=\"mp-demo-modal-title\">${escapeHtml(options.title || \'\')}</div>\n              <div class=\"mp-demo-modal-actions\">\n                ${\n                  okOnly\n                  ? \'\'\n                  : `<button type=\"button\" class=\"mp-demo-btn mp-demo-cancel\">${escapeHtml(options.cancelText || \'取消\')}</button>`\n                }\n                <button type=\"button\" class=\"mp-demo-btn mp-demo-btn-primary mp-demo-confirm\">${escapeHtml(options.confirmText || \'確定\')}</button>\n              </div>\n            </div>\n          `;\n\n          root.appendChild(mask);\n\n          const cancelBtn = mask.querySelector(\'.mp-demo-cancel\');\n          const confirmBtn = mask.querySelector(\'.mp-demo-confirm\');\n\n          if (cancelBtn) {\n            cancelBtn.addEventListener(\'click\', function(){\n              mask.remove();\n              resolve(false);\n            });\n          }\n\n          confirmBtn.addEventListener(\'click\', function(){\n            mask.remove();\n            resolve(true);\n          });\n        });\n      }\n\n      function showDemoProgressModal(title, duration){\n        duration = duration || 1800;\n\n        return new Promise(function(resolve){\n          const oldMask = root.querySelector(\'.mp-demo-modal-mask\');\n          if (oldMask) oldMask.remove();\n\n          const mask = document.createElement(\'div\');\n          mask.className = \'mp-demo-modal-mask\';\n\n          mask.innerHTML = `\n            <div class=\"mp-demo-modal\">\n              <div class=\"mp-demo-modal-title\" style=\"margin-bottom:26px;\">\n                ${escapeHtml(title || \'檢測中，請稍候\')}\n              </div>\n\n              <div class=\"mp-demo-progress-wrap\">\n                <div class=\"mp-demo-progress-bar\"></div>\n              </div>\n            </div>\n          `;\n\n          root.appendChild(mask);\n\n          const bar = mask.querySelector(\'.mp-demo-progress-bar\');\n\n          setTimeout(function(){\n            if (bar) bar.style.width = \'100%\';\n          }, 50);\n\n          setTimeout(function(){\n            mask.remove();\n            resolve(true);\n          }, duration);\n        });\n      }\n\n									   \n\n\n      function showLiveProgressModal(title){\n        const oldMask = root.querySelector(\'.mp-demo-modal-mask\');\n        if (oldMask) oldMask.remove();\n\n        const mask = document.createElement(\'div\');\n        mask.className = \'mp-demo-modal-mask\';\n\n        mask.innerHTML = `\n          <div class=\"mp-demo-modal\">\n            <div class=\"mp-demo-modal-title\" style=\"margin-bottom:18px;\">\n              ${escapeHtml(title || \'處理中，請稍候\')}\n            </div>\n\n            <div class=\"mp-demo-progress-wrap\">\n              <div class=\"mp-demo-progress-bar\" style=\"width:0%;\"></div>\n            </div>\n\n            <div class=\"mp-live-progress-text\" style=\"margin-top:14px;font-size:13px;color:#6b7280;\">\n              0%\n            </div>\n          </div>\n        `;\n\n        root.appendChild(mask);\n\n        const bar = mask.querySelector(\'.mp-demo-progress-bar\');\n        const text = mask.querySelector(\'.mp-live-progress-text\');\n\n        return {\n          update: function(percent, label){\n            percent = Math.max(0, Math.min(100, Number(percent || 0)));\n            if (bar) bar.style.width = percent + \'%\';\n            if (text) text.textContent = label || (percent + \'%\');\n          },\n          close: function(){\n            mask.remove();\n          }\n        };\n      }\n\n      async function callFileAction(action, value){\n        const url = window.location.origin\n          + \'/wp-json/momentry/v1/file-action?action=\'\n          + encodeURIComponent(action)\n          + \'&uuid=\'\n          + encodeURIComponent(value || \'\');\n\n        const res = await fetch(url, {\n          method: action === \'progress\' ? \'GET\' : \'POST\'\n        });\n\n        const data = await res.json().catch(function(){\n          return null;\n        });\n\n        console.log(\'FILE ACTION:\', action, value, data);\n\n        if (!res.ok || !data || data.success === false) {\n          const message = data && data.data ? JSON.stringify(data.data) : (data && data.message ? data.message : action + \' failed\');\n          throw new Error(message);\n        }\n\n        return data;\n      }\n\n      function getProgressPercent(data){\n        const d = data && data.data ? data.data : data;\n        if (!d) return 0;\n\n        if (typeof d.overall_progress === \'number\') return d.overall_progress;\n        if (typeof d.progress === \'number\') return d.progress;\n        if (typeof d.percent === \'number\') return d.percent;\n        if (typeof d.data?.overall_progress === \'number\') return d.data.overall_progress;\n        if (typeof d.data?.progress === \'number\') return d.data.progress;\n\n        return 0;\n      }\n\n      function getRegisteredUuid(registerResult, fallback){\n        return (\n          registerResult?.data?.file_uuid ||\n          registerResult?.data?.uuid ||\n          registerResult?.data?.id ||\n          registerResult?.data?.data?.file_uuid ||\n          registerResult?.data?.data?.uuid ||\n          registerResult?.data?.result?.file_uuid ||\n          registerResult?.data?.result?.uuid ||\n          fallback ||\n          \'\'\n        );\n      }\n\n      async function waitForCompleted(card, uuid){\n        const modal = showLiveProgressModal(\'處理中，請稍候\');\n        modal.update(0, \'Processing 0%\');\n\n        let tries = 0;\n\n        return new Promise(function(resolve, reject){\n          const timer = setInterval(async function(){\n            tries++;\n\n            try {\n              const data = await callFileAction(\'progress\', uuid);\n              const percent = getProgressPercent(data);\n\n              modal.update(percent, \'Processing \' + percent + \'%\');\n              setItemStatusById(uuid, \'processing\', percent);\n              updateCardStatusDom(card, \'processing\', percent);\n\n              if (percent >= 100) {\n                clearInterval(timer);\n                modal.update(100, \'Completed\');\n\n                setTimeout(function(){\n                  modal.close();\n                  setItemStatusById(uuid, \'completed\', 100);\n                  updateCardStatusDom(card, \'completed\', 100);\n                  resolve(true);\n                }, 800);\n                return;\n              }\n\n              if (tries >= 120) {\n                clearInterval(timer);\n                modal.close();\n                resolve(false);\n              }\n            } catch(err) {\n              clearInterval(timer);\n              modal.close();\n              reject(err);\n            }\n          }, 3000);\n        });\n      }\n\n      function readStatusMap(){\n        try {\n          const raw = localStorage.getItem(REGISTER_STORE_KEY);\n          if (!raw) return {};\n          const parsed = JSON.parse(raw);\n          return parsed && typeof parsed === \'object\' ? parsed : {};\n        } catch(e) {\n          return {};\n        }\n      }\n\n      function saveStatusMap(map){\n        try {\n          localStorage.setItem(REGISTER_STORE_KEY, JSON.stringify(map || {}));\n        } catch(e) {}\n      }\n\n      function setItemStatusById(id, newStatus, progress){\n        id = String(id || \'\');\n        if (!id) return;\n\n        const map = readStatusMap();\n\n        map[id] = {\n          status: newStatus,\n          progress: typeof progress === \'number\' ? progress : 0\n        };\n\n        saveStatusMap(map);\n\n        allItems.forEach(function(item){\n          if (String(item.id) === id) {\n            item.status = newStatus;\n            item.progress = typeof progress === \'number\' ? progress : 0;\n          }\n        });\n      }\n\n      function getStoredStatus(id){\n        const map = readStatusMap();\n        const saved = map[String(id || \'\')];\n\n        if (!saved) return null;\n\n        if (typeof saved === \'string\') {\n          return {\n            status: saved === \'ready\' ? \'completed\' : saved,\n            progress: saved === \'ready\' ? 100 : 0\n          };\n        }\n\n        return {\n          status: saved.status === \'ready\' ? \'completed\' : (saved.status || \'unregistered\'),\n          progress: typeof saved.progress === \'number\' ? saved.progress : 0\n        };\n      }\n\n      function getStatusLabel(statusValue, progress){\n        statusValue = String(statusValue || \'unregistered\').toLowerCase();\n\n        if (statusValue === \'completed\') return \'Completed\';\n        if (statusValue === \'registered\') return \'Registered\';\n        if (statusValue === \'probed\') return \'Probed\';\n        if (statusValue === \'processing\') return \'Processing\' + (progress ? \' \' + progress + \'%\' : \'\');\n        if (statusValue === \'failed\') return \'Failed\';\n\n        return \'未註冊\';\n      }\n\n      function isRegisteredLike(statusValue){\n        statusValue = String(statusValue || \'\').toLowerCase();\n\n        return (\n          statusValue === \'registered\' ||\n          statusValue === \'probed\' ||\n          statusValue === \'processing\' ||\n          statusValue === \'completed\' ||\n          statusValue === \'failed\'\n        );\n      }\n\n      function isDemoFailedCard(card){\n        const name = String(card.dataset.name || \'\').toLowerCase();\n\n        return DEMO_FAILED_FILE_KEYWORDS.some(function(keyword){\n          return name.includes(String(keyword).toLowerCase());\n        });\n      }\n\n      async function callScanApi(){\n        const res = await fetch(MOMENTRY_API_BASE + \'/api/v1/files/scan\', {\n          method: \'GET\',\n          headers: {\n            \'Authorization\': MOMENTRY_API_KEY,\n            \'X-API-Key\': MOMENTRY_API_KEY\n          }\n        });\n\n        const text = await res.text();\n        let data = null;\n\n        try {\n          data = JSON.parse(text);\n        } catch(e) {\n          data = text;\n        }\n\n        console.log(\'SCAN API RESULT:\', data);\n\n        if (!res.ok) {\n          throw new Error(\'Scan API failed: \' + res.status);\n        }\n\n        return data;\n      }\n\n      function showStatus(text){\n        if (!status) return;\n        status.textContent = text || \'\';\n        status.classList.toggle(\'show\', !!text);\n      }\n\n      function escapeHtml(str){\n        return String(str || \'\').replace(/[&<>\"\']/g, function(m){\n          return ({\n            \'&\':\'&amp;\',\n            \'<\':\'&lt;\',\n            \'>\':\'&gt;\',\n            \'\"\':\'&quot;\',\n            \"\'\":\'&#039;\'\n          })[m];\n        });\n      }\n\n      function stripHtml(str){\n        return String(str || \'\').replace(/<[^>]*>/g, \'\').trim();\n      }\n\n      function getFileNameFromUrl(url){\n        try {\n          const clean = String(url || \'\').split(\'?\')[0];\n          const name = clean.substring(clean.lastIndexOf(\'/\') + 1);\n          return decodeURIComponent(name || \'\');\n        } catch(e) {\n          return \'\';\n        }\n      }\n\n      function getExtension(url, mime){\n        const fileName = getFileNameFromUrl(url);\n\n        if (fileName && fileName.includes(\'.\')) {\n          return fileName.split(\'.\').pop().toLowerCase();\n        }\n\n        if (mime && mime.includes(\'/\')) {\n          return mime.split(\'/\').pop().toLowerCase();\n        }\n\n        return \'file\';\n      }\n\n      function formatBytes(bytes){\n        const n = Number(bytes || 0);\n        if (!n) return \'-\';\n\n        if (n < 1024) return n + \' B\';\n        if (n < 1024 * 1024) return Math.round(n / 1024) + \' KB\';\n\n        return (n / 1024 / 1024).toFixed(1).replace(\'.0\',\'\') + \' MB\';\n      }\n\n      function formatDate(dateStr){\n        if (!dateStr) return \'-\';\n\n        try {\n          const d = new Date(dateStr);\n          if (isNaN(d.getTime())) return dateStr;\n\n          const y = d.getFullYear();\n          const m = String(d.getMonth() + 1).padStart(2, \'0\');\n          const day = String(d.getDate()).padStart(2, \'0\');\n\n          return y + \'-\' + m + \'-\' + day;\n        } catch(e) {\n          return dateStr;\n        }\n      }\n\n      function normalizeTypeByData(type, mime, ext, name, url, mediaType){\n        type = String(type || \'\').toLowerCase();\n        mime = String(mime || \'\').toLowerCase();\n        ext = String(ext || \'\').toLowerCase();\n        name = String(name || \'\').toLowerCase();\n        url = String(url || \'\').toLowerCase();\n        mediaType = String(mediaType || \'\').toLowerCase();\n\n        if (\n          mediaType === \'video\' ||\n          type === \'video\' ||\n          mime.indexOf(\'video/\') === 0 ||\n          mime.includes(\'video/mp4\') ||\n          ext === \'mp4\' ||\n          ext === \'mov\' ||\n          ext === \'m4v\' ||\n          ext === \'webm\' ||\n          ext === \'avi\' ||\n          ext === \'mkv\' ||\n          name.endsWith(\'.mp4\') ||\n          name.endsWith(\'.mov\') ||\n          name.endsWith(\'.m4v\') ||\n          name.endsWith(\'.webm\') ||\n          url.includes(\'.mp4\') ||\n          url.includes(\'.mov\') ||\n          url.includes(\'.m4v\') ||\n          url.includes(\'.webm\')\n        ) {\n          return \'video\';\n        }\n\n        if (\n          mime.includes(\'pdf\') ||\n          mime.includes(\'text\') ||\n          mime.includes(\'document\') ||\n          mime.includes(\'spreadsheet\') ||\n          mime.includes(\'presentation\') ||\n          ext === \'pdf\' ||\n          ext === \'txt\' ||\n          ext === \'md\' ||\n          ext === \'doc\' ||\n          ext === \'docx\' ||\n          ext === \'xls\' ||\n          ext === \'xlsx\' ||\n          ext === \'csv\' ||\n          ext === \'ppt\' ||\n          ext === \'pptx\'\n        ) {\n          return \'document\';\n        }\n\n        if (\n          mediaType === \'image\' ||\n          type === \'photo\' ||\n          type === \'image\' ||\n          mime.indexOf(\'image/\') === 0 ||\n          ext === \'jpg\' ||\n          ext === \'jpeg\' ||\n          ext === \'png\' ||\n          ext === \'gif\' ||\n          ext === \'webp\'\n        ) {\n          return \'photo\';\n        }\n\n        return type || \'file\';\n      }\n\n      function getTypeLabel(type){\n        type = String(type || \'\').toLowerCase();\n\n        if (type === \'video\') return \'VIDEO\';\n        if (type === \'document\') return \'DOC\';\n        if (type === \'photo\') return \'PHOTO\';\n\n        return \'FILE\';\n      }\n\n      function getDocIcon(type, ext){\n        type = String(type || \'\').toLowerCase();\n        ext = String(ext || \'\').toLowerCase();\n\n        if (type === \'video\' || ext === \'mp4\' || ext === \'mov\' || ext === \'m4v\' || ext === \'webm\') return \'🎬\';\n        if (ext === \'pdf\') return \'📄\';\n        if (ext === \'txt\' || ext === \'md\') return \'📝\';\n        if (ext === \'doc\' || ext === \'docx\') return \'📝\';\n        if (ext === \'xls\' || ext === \'xlsx\' || ext === \'csv\') return \'📊\';\n        if (ext === \'ppt\' || ext === \'pptx\') return \'📑\';\n\n        return \'📄\';\n      }\n\n      function getBackendFileExt(fileName){\n        const name = String(fileName || \'\').split(\'?\')[0];\n        if (name && name.includes(\'.\')) {\n          return name.split(\'.\').pop().toLowerCase();\n        }\n        return \'file\';\n      }\n\n      function mapBackendStatus(file){\n        const rawStatus = String(file && file.status ? file.status : \'\').toLowerCase();\n\n        if (rawStatus === \'ready\') return \'registered\';\n        if (rawStatus === \'completed\') return \'registered\';\n        if (rawStatus === \'processing\') return \'processing\';\n        if (rawStatus === \'failed\') return \'failed\';\n        if (rawStatus === \'registered\') return \'registered\';\n        if (rawStatus === \'probed\') return \'probed\';\n        if (rawStatus === \'unregistered\') return \'unregistered\';\n\n        return file && file.is_registered ? \'registered\' : \'unregistered\';\n      }\n\n      function mapBackendFileItem(file, index){\n        const fileName = file.file_name || file.relative_path || file.file_path || (\'backend-file-\' + index);\n        const ext = getBackendFileExt(fileName);\n        const type = normalizeTypeByData(\'\', \'\', ext, fileName, file.file_path || \'\', \'\');\n        const statusValue = mapBackendStatus(file);\n        const stored = getStoredStatus(file.file_uuid || file.file_path || file.relative_path || fileName || index);\n\n        return {\n          id: String(file.file_uuid || file.file_path || file.relative_path || fileName || index),\n          type: type,\n          name: fileName,\n          title: fileName,\n          source: \'Momentry Backend\',\n         thumb:\n  type === \'photo\'\n    ? (\n        file.url ||\n        file.file_url ||\n        file.download_url ||\n        file.preview_url ||\n        \'\'\n      )\n    : (\n        file.file_uuid\n          ? getFileAssetUrl(file.file_uuid, \'thumbnail\')\n          : \'\'\n      ),\n\nthumbAlt1: \'\',\nthumbAlt2: \'\',\n  \nurl: file.file_uuid && type === \'video\'\n  ? getFileAssetUrl(file.file_uuid, \'video\')\n  : \'\',\n          link: \'\',\n          mime: type === \'video\' ? \'video/\' + ext : \'\',\n          ext: ext,\n          size: file.file_size || \'\',\n          width: \'\',\n          height: \'\',\n          description: file.relative_path || file.file_path || \'-\',\n          createdAt: file.modified_time || file.registration_time || \'\',\n          mediaType: type === \'video\' ? \'video\' : \'file\',\n          status: statusValue,\n          progress: 0,\n          filePath: file.file_path || \'\',\n          relativePath: file.relative_path || \'\',\n          fileUuid: file.file_uuid || \'\',\n          isRegistered: !!file.is_registered,\n          registrationTime: file.registration_time || \'\',\n          jobId: file.job_id || \'\'\n        };\n      }\n\n      function normalizeItemType(item){\n        return normalizeTypeByData(\n          item.type,\n          item.mime,\n          item.ext,\n          item.name,\n          item.url,\n          item.mediaType\n        );\n      }\n\n   function isAllowedItem(item){\n  return true;\n}\n\n     function getDisplayFilter(){\n  const checked = root.querySelector(\'input[name=\"mp-display-filter\"]:checked\');\n  return checked ? checked.value : \'video\'; // 默认 video\n}\n\n    function renderThumb(item){\n  const displayType = normalizeItemType(item);\n\n  if (displayType === \'video\' && item.thumb) {\n    return `\n      <img \n        class=\"mp-auth-thumb\" \n        data-thumb-url=\"${escapeHtml(item.thumb)}\" \n        alt=\"\"\n        style=\"width:100%;height:100%;object-fit:cover;display:block;\"\n      >\n    `;\n  }\n\n  return `\n    <div class=\"mp-doc-thumb\">\n      <div class=\"mp-doc-icon\">${getDocIcon(displayType, item.ext)}</div>\n      <div class=\"mp-doc-ext\">${escapeHtml(item.ext || displayType || \'file\')}</div>\n    </div>\n  `;\n}\n     function loadAuthThumbnails(){\n  const imgs = Array.from(root.querySelectorAll(\'img.mp-auth-thumb[data-thumb-url]\'));\n\n  imgs.forEach(function(img){\n    if (img.dataset.loaded === \'1\') return;\n\n    img.dataset.loaded = \'1\';\n    img.dataset.tryIndex = \'0\';\n\n    img.onerror = function(){\n  console.log(\'IMAGE LOAD FAILED:\', img.src);\n};\n\n    img.src = img.dataset.thumbUrl;\n  });\n}\n\n      function renderItems(items){\n        if (!grid) return;\n\n        if (!items.length) {\n          grid.innerHTML = \'\';\n          showStatus(\'沒有符合條件的影片或文件。\');\n          updateRegisterButton();\n          return;\n        }\n\n        showStatus(\'\');\n\n        grid.innerHTML = items.map(item => {\n          const displayType = normalizeItemType(item);\n          const statusValue = item.status || \'unregistered\';\n          const progressValue = item.progress || 0;\n\n          const isCompleted = statusValue === \'completed\';\n          const isProcessing = statusValue === \'processing\';\n          const isFailed = statusValue === \'failed\';\n          const isDimmed = statusValue === \'registered\' || statusValue === \'probed\' || statusValue === \'processing\';\n\n          item.type = displayType;\n\n          return `\n            <article class=\"mp-file-card\n                ${isCompleted ? \'is-completed\' : \'\'}\n                ${isProcessing ? \'is-processing\' : \'\'}\n                ${isFailed ? \'is-failed\' : \'\'}\n                ${isDimmed ? \'is-dimmed\' : \'\'}\"\n              data-id=\"${escapeHtml(item.id)}\"\n              data-uuid=\"${escapeHtml(item.fileUuid || \'\')}\"\n              data-path=\"${escapeHtml(item.filePath || \'\')}\"\n              data-type=\"${escapeHtml(displayType)}\"\n              data-status=\"${escapeHtml(statusValue)}\"\n              data-progress=\"${escapeHtml(progressValue)}\"\n              data-name=\"${escapeHtml(item.name)}\"\n              data-source=\"${escapeHtml(item.source)}\"\n              data-url=\"${escapeHtml(item.url || \'\')}\">\n\n              <div class=\"mp-thumb-wrap\">\n                ${renderThumb(item)}\n                <span class=\"mp-badge-type\">${escapeHtml(getTypeLabel(displayType))}</span>\n\n                ${\n                  displayType === \'video\' && item.url\n                  ? `<button class=\"mp-play-btn\" type=\"button\" data-video-url=\"${escapeHtml(item.url)}\">▶</button>`\n                  : \'\'\n                }\n\n                <span class=\"mp-checkmark\">✓</span>\n                <span class=\"mp-failed-mark\">!</span>\n                <span class=\"mp-complete-mark\">✓</span>\n              </div>\n\n              <div class=\"mp-meta\">\n                <div class=\"mp-source\">${escapeHtml(item.source)}・${escapeHtml(formatDate(item.createdAt))}</div>\n                <div class=\"mp-name\">${escapeHtml(item.name)}</div>\n\n                <div class=\"mp-people\">\n                  <span class=\"mp-person-chip\">${escapeHtml(item.ext || displayType)}</span>\n                  <span class=\"mp-person-chip\">${escapeHtml(item.mime || \'file\')}</span>\n                </div>\n\n                <button class=\"mp-detail-link\" type=\"button\">資料詳情</button>\n\n                <span class=\"mp-register-status st-${escapeHtml(statusValue)}\">\n                  ${escapeHtml(getStatusLabel(statusValue, progressValue))}\n                </span>\n\n                <div class=\"mp-detail-box\">\n                  <div class=\"mp-detail-title\">Momentry 後台資料</div>\n                  <div class=\"mp-detail-row\">Media ID：${escapeHtml(item.id)}</div>\n                  <div class=\"mp-detail-row\">檔案名稱：${escapeHtml(item.name)}</div>\n                  <div class=\"mp-detail-row\">標題：${escapeHtml(item.title)}</div>\n                  <div class=\"mp-detail-row\">類型：${escapeHtml(displayType)}</div>\n                  <div class=\"mp-detail-row\">狀態：${escapeHtml(getStatusLabel(statusValue, progressValue))}</div>\n                  <div class=\"mp-detail-row\">副檔名：${escapeHtml(item.ext)}</div>\n                  <div class=\"mp-detail-row\">MIME：${escapeHtml(item.mime)}</div>\n                  <div class=\"mp-detail-row\">大小：${escapeHtml(formatBytes(item.size))}</div>\n                  <div class=\"mp-detail-row\">上傳日期：${escapeHtml(formatDate(item.createdAt))}</div>\n                  <div class=\"mp-detail-row\">說明：${escapeHtml(item.description || \'-\')}</div>\n                  <div class=\"mp-detail-row\">URL：${escapeHtml(item.url || \'-\')}</div>\n                  <div class=\"mp-detail-row\">File UUID：${escapeHtml(item.fileUuid || \'-\')}</div>\n                  <div class=\"mp-detail-row\">Relative Path：${escapeHtml(item.relativePath || \'-\')}</div>\n                  <div class=\"mp-detail-row\">File Path：${escapeHtml(item.filePath || \'-\')}</div>\n                  <div class=\"mp-detail-row\">Is Registered：${escapeHtml(item.isRegistered ? \'true\' : \'false\')}</div>\n                  <div class=\"mp-detail-row\">Registration Time：${escapeHtml(item.registrationTime || \'-\')}</div>\n                  <div class=\"mp-detail-row\">Job ID：${escapeHtml(item.jobId || \'-\')}</div>\n                </div>\n              </div>\n            </article>\n          `;\n        }).join(\'\');\n\n        bindCardEvents();\n        loadAuthThumbnails();\n        updateRegisterButton();\n      }\n\n      function getSelectedCards(){\n        return Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\'));\n      }\n\n      function updateRegisterButton(){\n        if (!addToPeopleBtn) return;\n\n        const selectedCards = getSelectedCards();\n\n        if (!selectedCards.length) {\n          addToPeopleBtn.textContent = \'註冊\';\n          return;\n        }\n\n        const registeredLikeCount = selectedCards.filter(function(card){\n          return isRegisteredLike(card.dataset.status);\n        }).length;\n\n        const unregisteredCount = selectedCards.length - registeredLikeCount;\n\n        if (registeredLikeCount === selectedCards.length) {\n          addToPeopleBtn.textContent = \'取消註冊\';\n        } else if (unregisteredCount === selectedCards.length) {\n          addToPeopleBtn.textContent = \'註冊\';\n        } else {\n          addToPeopleBtn.textContent = \'註冊 / 取消註冊\';\n        }\n      }\n\n      function updateCardStatusDom(card, newStatus, progress){\n        if (!card) return;\n\n        progress = typeof progress === \'number\' ? progress : 0;\n\n        card.dataset.status = newStatus;\n        card.dataset.progress = String(progress);\n\n        card.classList.remove(\'is-completed\', \'is-processing\', \'is-failed\', \'is-dimmed\');\n\n        if (newStatus === \'completed\') card.classList.add(\'is-completed\');\n        if (newStatus === \'processing\') card.classList.add(\'is-processing\', \'is-dimmed\');\n        if (newStatus === \'failed\') card.classList.add(\'is-failed\');\n        if (newStatus === \'registered\' || newStatus === \'probed\') card.classList.add(\'is-dimmed\');\n\n        const badge = card.querySelector(\'.mp-register-status\');\n        if (badge) {\n          badge.className = \'mp-register-status st-\' + newStatus;\n          badge.textContent = getStatusLabel(newStatus, progress);\n        }\n\n        updateRegisterButton();\n      }\n\n      function clearAllSelectedCards(){\n        Array.from(root.querySelectorAll(\'.mp-file-card\')).forEach(function(card){\n          card.classList.remove(\'is-selected\');\n        });\n\n        updateRegisterButton();\n      }\n\n      function getVisibleCards(){\n        return Array.from(root.querySelectorAll(\'.mp-file-card\'));\n      }\n\n      function selectCardsByType(type){\n        clearAllSelectedCards();\n\n        getVisibleCards().forEach(function(card){\n          if (!type || card.dataset.type === type) {\n            card.classList.add(\'is-selected\');\n          }\n        });\n\n        updateRegisterButton();\n      }\n\n   async function registerCardsFlow(cards){\n  if (!cards.length) return;\n\n  const okRegister = await showDemoModal({\n    title: \'確定要註冊所選的 \' + cards.length + \' 份檔案嗎？\',\n    cancelText: \'取消\',\n    confirmText: \'確定註冊\'\n  });\n\n  if (!okRegister) {\n    clearAllSelectedCards();\n    return;\n  }\n\n  await showDemoProgressModal(\'註冊中，請稍候\', 900);\n\n  const registeredCards = [];\n\n  for (const card of cards) {\n    const registerInput = card.dataset.path || card.dataset.id;\n\n    try {\n      const registerResult = await callFileAction(\'register\', registerInput);\n\n      const realUuid = getRegisteredUuid(registerResult, \'\');\n\n      if (!realUuid) {\n        throw new Error(\'Register 成功，但沒有回傳 file_uuid\');\n      }\n\n      card.dataset.uuid = realUuid;\n      card.dataset.status = \'registered\';\n\n      setItemStatusById(realUuid, \'registered\', 0);\n      updateCardStatusDom(card, \'registered\', 0);\n\n      registeredCards.push({\n        card: card,\n        uuid: realUuid\n      });\n\n    } catch(err) {\n      console.error(err);\n      setItemStatusById(registerInput, \'failed\', 0);\n      updateCardStatusDom(card, \'failed\', 0);\n    }\n  }\n\n  if (!registeredCards.length) {\n    clearAllSelectedCards();\n    showStatus(\'註冊失敗，沒有成功註冊的檔案。\');\n    return;\n  }\n\n  const okProbe = await showDemoModal({\n    title: \'開始檢測已註冊的 \' + registeredCards.length + \' 份檔案\',\n    cancelText: \'稍後\',\n    confirmText: \'開始檢測\'\n  });\n\n  if (!okProbe) {\n    clearAllSelectedCards();\n    showStatus(\'已註冊，請按刷新確認最新狀態。\');\n    return;\n  }\n\n  await showDemoProgressModal(\'檢測中，請稍候\', 1800);\n\n  const probedCards = [];\n\n  for (const item of registeredCards) {\n    try {\n      await callFileAction(\'probe\', item.uuid);\n\n      setItemStatusById(item.uuid, \'probed\', 0);\n      updateCardStatusDom(item.card, \'probed\', 0);\n\n      probedCards.push(item);\n\n    } catch(err) {\n      console.error(err);\n      setItemStatusById(item.uuid, \'failed\', 0);\n      updateCardStatusDom(item.card, \'failed\', 0);\n    }\n  }\n\n  if (!probedCards.length) {\n    clearAllSelectedCards();\n    showStatus(\'檢測完成，但沒有可辨識的檔案。\');\n    return;\n  }\n\n  const okProcess = await showDemoModal({\n    title: \'開始辨識檢測成功的 \' + probedCards.length + \' 份檔案\',\n    cancelText: \'稍後\',\n    confirmText: \'開始辨識\'\n  });\n\n  if (!okProcess) {\n    clearAllSelectedCards();\n    showStatus(\'已檢測，請稍後開始辨識。\');\n    return;\n  }\n\n  for (const item of probedCards) {\n    try {\n      await showDemoProgressModal(\'開始處理中，請稍候\', 900);\n\n      await callFileAction(\'process\', item.uuid);\n\n      setItemStatusById(item.uuid, \'processing\', 0);\n      updateCardStatusDom(item.card, \'processing\', 0);\n\n      const completed = await waitForCompleted(item.card, item.uuid);\n\n      if (!completed) {\n        setItemStatusById(item.uuid, \'failed\', 0);\n        updateCardStatusDom(item.card, \'failed\', 0);\n        showStatus(\'後台處理逾時，已標記為 Failed。\');\n      }\n\n    } catch(err) {\n      console.error(err);\n      setItemStatusById(item.uuid, \'failed\', 0);\n      updateCardStatusDom(item.card, \'failed\', 0);\n      showStatus(\'處理失敗：\' + item.uuid);\n    }\n  }\n\n  clearAllSelectedCards();\n  showStatus(\'處理完成，請按刷新確認最新狀態。\');\n}\n\n      function bindCardEvents(){\n        const cards = Array.from(root.querySelectorAll(\'.mp-file-card\'));\n\n        cards.forEach(card => {\n          card.addEventListener(\'click\', function(e){\n            if (e.target.closest(\'.mp-detail-link\')) return;\n            if (e.target.closest(\'.mp-detail-box\')) return;\n            if (e.target.closest(\'.mp-play-btn\')) return;\n\n            card.classList.toggle(\'is-selected\');\n            updateRegisterButton();\n          });\n\n          const detailBtn = card.querySelector(\'.mp-detail-link\');\n          if (detailBtn) {\n            detailBtn.addEventListener(\'click\', function(e){\n              e.preventDefault();\n              e.stopPropagation();\n              card.classList.toggle(\'show-detail\');\n            });\n          }\n        });\n      }\n\n      function applyFilters(){\n        const keyword = searchInput ? searchInput.value.trim().toLowerCase() : \'\';\n        const displayFilter = getDisplayFilter();\n\n        let items = allItems.filter(item => {\n          const itemType = normalizeItemType(item);\n          item.type = itemType;\n\n          if (!isAllowedItem(item)) return false;\n\n          let visible = true;\n\n          const text = [\n            item.name,\n            item.title,\n            item.source,\n            item.description,\n            itemType,\n            item.mime,\n            item.ext,\n            item.url,\n            item.status,\n            getStatusLabel(item.status, item.progress)\n          ].join(\' \').toLowerCase();\n\n          if (keyword && !text.includes(keyword)) visible = false;\n          if (itemType !== \'video\') visible = false; // 无论 displayFilter，非 video 全部隐藏\n		  if (displayFilter === \'video\' && itemType !== \'video\') visible = false;\n          if (displayFilter === \'document\' && itemType !== \'document\') visible = false;\n		  if (displayFilter === \'photo\' && itemType !== \'photo\') visible = false;\n          if (onlyVideos && onlyVideos.checked && itemType !== \'video\') visible = false;\n          if (onlyPhotos && onlyPhotos.checked && itemType !== \'document\') visible = false;\n		  if (onlyPhotos && onlyPhotos.checked && itemType !== \'photo\') visible = false;\n\n          return visible;\n        });\n\n        const sort = root.querySelector(\'input[name=\"mp-sort\"]:checked\')?.value || \'time_desc\';\n\n        items.sort(function(a, b){\n          if (sort === \'name_asc\') return a.name.localeCompare(b.name);\n          if (sort === \'name_desc\') return b.name.localeCompare(a.name);\n          if (sort === \'time_asc\') return String(a.createdAt).localeCompare(String(b.createdAt));\n          return String(b.createdAt).localeCompare(String(a.createdAt));\n        });\n\n        clearAllSelectedCards();\n        renderItems(items);\n      }\n\nasync function loadAllScanPages(){\n  let page = 1;\n  const limit = 100;\n  let allFiles = [];\n\n  while (true) {\n    const res = await fetch(MEDIA_API + \'?page=\' + page + \'&limit=\' + limit, {\n      method:\'GET\',\n      headers: {\n        \'Authorization\': MOMENTRY_API_KEY,\n        \'X-API-Key\': MOMENTRY_API_KEY\n      }\n    });\n\n    const text = await res.text();\n    let data = null;\n\n    try {\n      data = JSON.parse(text);\n    } catch(e) {\n      data = null;\n    }\n\n    console.log(\'SCAN API PAGE:\', page, data || text);\n\n    if (!res.ok) {\n      throw new Error(\'Scan API failed: \' + res.status);\n    }\n\n    const files =\n      Array.isArray(data) ? data :\n      Array.isArray(data?.files) ? data.files :\n      Array.isArray(data?.data?.files) ? data.data.files :\n      Array.isArray(data?.data) ? data.data :\n      [];\n\n    allFiles = allFiles.concat(files);\n\n    if (files.length < limit) break;\n\n    page++;\n  }\n\n  return allFiles;\n}\n      async function loadMediaItems(){\n        showStatus(\'正在載入 Momentry 後台真實檔案...\');\n\n        try {\n          const files = await loadAllScanPages();\n\nconsole.log(\'SCAN API ALL FILES:\', files.length, files);\n\n          allItems = files.map(mapBackendFileItem).filter(isAllowedItem);\n\n          console.log(\'Momentry files:\', files.length, \'display items:\', allItems.length, allItems);\n\n          if (!allItems.length) {\n            renderItems([]);\n            showStatus(\'Momentry 後台目前沒有可顯示的影片或文件。\');\n            return;\n          }\n\n          applyFilters();\n          showStatus(\'\');\n          root.dataset.mediaLoading = \'\';\n          root.dataset.mediaLoaded = \'\';\n\n        } catch(err) {\n          console.error(err);\n          allItems = [];\n          renderItems([]);\n          showStatus(\'讀取 Momentry Scan API 失敗。請確認 API Key / CORS / 網路是否正常。\');\n          root.dataset.mediaLoading = \'\';\n        }\n      }\n\n      if (!root.dataset.controlsBound) {\n        root.dataset.controlsBound = \'1\';\n\n        ensureDemoStatusStyle();\n\n        if (filterBtn && filterPop) {\n          filterBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n            e.stopPropagation();\n            filterPop.classList.toggle(\'show\');\n          });\n        }\n\n        document.addEventListener(\'click\', function(e){\n          if (!root.contains(e.target)) return;\n          if (!filterPop) return;\n\n          if (!e.target.closest(\'#mpFilterPop\') && !e.target.closest(\'#mpToggleFilter\')) {\n            filterPop.classList.remove(\'show\');\n          }\n        });\n\n        Array.from(root.querySelectorAll(\'input[name=\"mp-display-filter\"]\')).forEach(function(radio){\n          radio.addEventListener(\'change\', function(){\n            clearAllSelectedCards();\n            applyFilters();\n          });\n        });\n\n        if (searchInput) searchInput.addEventListener(\'input\', applyFilters);\n\n        if (onlyPhotos) {\n          onlyPhotos.addEventListener(\'change\', function(){\n            if (onlyPhotos.checked && onlyVideos) onlyVideos.checked = false;\n            applyFilters();\n          });\n        }\n\n        if (onlyVideos) {\n          onlyVideos.addEventListener(\'change\', function(){\n            if (onlyVideos.checked && onlyPhotos) onlyPhotos.checked = false;\n            applyFilters();\n          });\n        }\n\n        Array.from(root.querySelectorAll(\'input[name=\"mp-sort\"]\')).forEach(function(radio){\n          radio.addEventListener(\'change\', applyFilters);\n        });\n\n        if (refreshBtn) {\n          refreshBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n\n            if (searchInput) searchInput.value = \'\';\n            if (onlyPhotos) onlyPhotos.checked = false;\n            if (onlyVideos) onlyVideos.checked = false;\n            if (showAll) showAll.checked = true;\n\n            clearAllSelectedCards();\n            loadMediaItems();\n          });\n        }\n\n        if (selectAllBtn) {\n          selectAllBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n            selectCardsByType(\'\');\n          });\n        }\n\n        if (selectVideosBtn) {\n          selectVideosBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n            selectCardsByType(\'video\');\n          });\n        }\n\n        if (selectDocsBtn) {\n          selectDocsBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n            selectCardsByType(\'document\');\n          });\n        }\n\n        if (clearSelectedBtn) {\n          clearSelectedBtn.addEventListener(\'click\', function(e){\n            e.preventDefault();\n            clearAllSelectedCards();\n          });\n        }\n\n        if (addToPeopleBtn) {\n          addToPeopleBtn.addEventListener(\'click\', async function(){\n            const selectedCards = getSelectedCards();\n\n            if (!selectedCards.length) {\n              alert(\'請先選擇檔案\');\n              return;\n            }\n\n            const registeredLikeCards = selectedCards.filter(function(card){\n              return isRegisteredLike(card.dataset.status);\n            });\n\n            const unregisteredCards = selectedCards.filter(function(card){\n              return !isRegisteredLike(card.dataset.status);\n            });\n\n            if (registeredLikeCards.length === selectedCards.length) {\n              await unregisterCardsFlow(selectedCards);\n              return;\n            }\n\n            if (unregisteredCards.length === selectedCards.length) {\n              await registerCardsFlow(selectedCards);\n              return;\n            }\n\n            await unregisterCardsFlow(registeredLikeCards);\n            await registerCardsFlow(unregisteredCards);\n          });\n        }\n      }\n\n      function ensureVideoPlayer(){\n        if (document.getElementById(\'mpVideoModal\')) return;\n\n        const modal = document.createElement(\'div\');\n        modal.className = \'mp-video-modal\';\n        modal.id = \'mpVideoModal\';\n\n        modal.innerHTML = `\n          <div class=\"mp-video-box\">\n            <button class=\"mp-video-close\" type=\"button\" id=\"mpVideoClose\">×</button>\n            <video id=\"mpVideoPlayer\" controls playsinline preload=\"metadata\"></video>\n          </div>\n        `;\n\n        document.body.appendChild(modal);\n\n        const video = document.getElementById(\'mpVideoPlayer\');\n        const closeBtn = document.getElementById(\'mpVideoClose\');\n\n        function closeVideo(){\n          video.pause();\n          video.removeAttribute(\'src\');\n          video.load();\n          modal.classList.remove(\'show\');\n        }\n\n        document.addEventListener(\'click\', function(e){\n          const btn = e.target.closest(\'.mp-play-btn\');\n          if (!btn) return;\n\n          e.preventDefault();\n          e.stopPropagation();\n\n          const url = btn.dataset.videoUrl;\n          if (!url) {\n            alert(\'沒有影片網址\');\n            return;\n          }\n\n          video.pause();\n          video.removeAttribute(\'src\');\n          video.load();\n\n          video.src = url;\n          video.preload = \'auto\';\n\n          modal.classList.add(\'show\');\n\n          video.load();\n\n          video.oncanplay = function () {\n            video.play().catch(function(err){\n              console.log(\'播放失敗：\', err);\n            });\n          };\n        });\n\n        closeBtn.addEventListener(\'click\', closeVideo);\n\n        modal.addEventListener(\'click\', function(e){\n          if (e.target === modal) closeVideo();\n        });\n      }\n\n      ensureVideoPlayer();\n      loadMediaItems();\n      return true;\n    }\n\n    function startPeopleFilesLoader(){\n      let tries = 0;\n\n      const timer = setInterval(function(){\n        tries++;\n\n        const ok = initPeopleFilesMediaLoader();\n\n        if (ok || tries > 50) {\n          clearInterval(timer);\n        }\n      }, 200);\n    }\n\n    function delayedPeopleFilesLoader(){\n      setTimeout(startPeopleFilesLoader, 100);\n      setTimeout(startPeopleFilesLoader, 500);\n      setTimeout(startPeopleFilesLoader, 1200);\n    }\n\n    document.addEventListener(\'DOMContentLoaded\', delayedPeopleFilesLoader);\n    window.addEventListener(\'load\', delayedPeopleFilesLoader);\n\n    let lastPath = location.pathname;\n\n    setInterval(function(){\n      if (location.pathname !== lastPath) {\n        lastPath = location.pathname;\n\n        if (location.pathname.includes(\'library\')) {\n          delayedPeopleFilesLoader();\n        }\n      }\n    }, 800);\n\n  })();\n  </script>\n\n  <?php\n});','','global',0,10,1,'2026-05-29 10:11:32',1,NULL),
(56,'LT- 檔案管理-近期註冊紀錄','','\nadd_action(\'wp_footer\', function () {\n  // PHP 层只在 Library 页面渲染\n  if (\n    !is_page(\'library\') &&\n    strpos($_SERVER[\'REQUEST_URI\'], \'/library\') === false\n  ) return;\n  ?>\n  <style>\n    #ltRegisterLogLauncher{\n      position:fixed;\n      right:34px;\n      bottom:34px;\n      width:64px;\n      height:64px;\n      border-radius:50%;\n      border:1px solid #d8dce3;\n      background:#fff;\n      box-shadow:0 8px 22px rgba(0,0,0,.16);\n      z-index:999999;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      cursor:pointer;\n      font-size:30px;\n    }\n\n    #ltRegisterLogPanel{\n      position:fixed;\n      right:72px;\n      bottom:52px;\n      width:330px;\n      max-height:360px;\n      background:#fff;\n      border:1px solid #e4e7ec;\n      border-radius:18px;\n      box-shadow:0 14px 36px rgba(0,0,0,.14);\n      z-index:999998;\n      overflow:hidden;\n      font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Noto Sans TC\",sans-serif;\n      color:#202124;\n    }\n\n    #ltRegisterLogPanel.is-hidden{display:none;}\n\n    .lt-reglog-head{\n      height:54px;\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      padding:0 18px;\n      border-bottom:1px solid #eef1f5;\n    }\n\n    .lt-reglog-title{\n      font-size:16px;\n      font-weight:800;\n    }\n\n    .lt-reglog-close{\n      border:none;\n      background:transparent;\n      font-size:22px;\n      cursor:pointer;\n    }\n\n    .lt-reglog-body{\n      max-height:248px;\n      overflow:auto;\n    }\n\n    .lt-reglog-empty{\n      padding:22px 18px;\n      font-size:13px;\n      color:#8a919c;\n      text-align:center;\n    }\n\n    .lt-reglog-item{\n      display:grid;\n      grid-template-columns:34px 1fr 24px;\n      gap:10px;\n      align-items:center;\n      padding:12px 16px;\n      border-bottom:1px solid #f1f3f5;\n    }\n\n    .lt-reglog-icon{\n      width:26px;\n      height:26px;\n      border-radius:8px;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      background:#f1f5f9;\n    }\n\n    .lt-reglog-name{\n      font-size:12px;\n      font-weight:700;\n      color:#3f4651;\n      line-height:1.35;\n      white-space:normal;\n      word-break:break-word;\n      overflow:hidden;\n      display:-webkit-box;\n      -webkit-line-clamp:2;\n      -webkit-box-orient:vertical;\n      margin-bottom:3px;\n    }\n\n    .lt-reglog-sub{\n      font-size:11px;\n      color:#6b7280;\n    }\n\n    .lt-reglog-status.is-completed{color:#2f7d46;font-weight:700;}\n    .lt-reglog-status.is-failed{color:#d11f1f;font-weight:700;}\n    .lt-reglog-status.is-processing{color:#2f6ea3;font-weight:700;}\n\n    .lt-reglog-delete{\n      border:none;\n      background:transparent;\n      color:#c5cad3;\n      font-size:18px;\n      cursor:pointer;\n      line-height:1;\n      padding:0;\n    }\n\n    .lt-reglog-delete:hover{\n      color:#e11d48;\n    }\n  </style>\n\n  <script>\n  (function(){\n    const STORE_KEY = \'lt_people_files_recent_register_log_v1\';\n    let panel, launcher;\n\n    // 判断是否在 Library 页面\n    function shouldShowPanel(){\n      return window.location.pathname.includes(\'/library\') && document.querySelector(\'#ms-files-page\');\n    }\n\n    function readLogs(){\n      try{ return JSON.parse(localStorage.getItem(STORE_KEY) || \'[]\'); }catch(e){ return []; }\n    }\n\n    function saveLogs(logs){ localStorage.setItem(STORE_KEY, JSON.stringify(logs || [])); }\n\n    function label(status, progress){\n      progress = Number(progress || 0);\n      if(status===\'completed\') return \'完成註冊\';\n      if(status===\'failed\') return \'註冊失敗\';\n      if(status===\'processing\'){\n        let remainText=\'剩餘 2 分鐘\';\n        if(progress>=80) remainText=\'剩餘 30 秒\';\n        else if(progress>=60) remainText=\'剩餘 1 分鐘\';\n        else if(progress>=40) remainText=\'剩餘 2 分鐘\';\n        return `\n          <div>\n            <div>處理中 ${progress}%・${remainText}</div>\n            <div style=\"margin-top:5px;width:100%;height:4px;background:#d9d9d9;border-radius:999px;overflow:hidden;\">\n              <div style=\"width:${progress}%;height:100%;background:#3b73d9;border-radius:999px;\"></div>\n            </div>\n          </div>\n        `;\n      }\n      if(status===\'probed\') return \'檢測完成\';\n      if(status===\'registered\') return \'已註冊\';\n      return \'未註冊\';\n    }\n\n    function icon(type, status){\n      if(status===\'completed\') return \'✅\';\n      if(status===\'failed\') return \'⚠️\';\n      if(type===\'video\') return \'🎬\';\n      if(type===\'document\') return \'📄\';\n      return \'📁\';\n    }\n\n    function createPanel(){\n      if(panel) return;\n      panel=document.createElement(\'div\');\n      panel.id=\'ltRegisterLogPanel\';\n      panel.className=\'is-hidden\';\n      panel.innerHTML=`\n        <div class=\"lt-reglog-head\">\n          <div class=\"lt-reglog-title\">近期註冊紀錄</div>\n          <button type=\"button\" class=\"lt-reglog-close\">×</button>\n        </div>\n        <div class=\"lt-reglog-body\" id=\"ltRegisterLogBody\"></div>\n      `;\n      launcher=document.createElement(\'button\');\n      launcher.id=\'ltRegisterLogLauncher\';\n      launcher.type=\'button\';\n      launcher.innerHTML=\'☑\';\n      document.body.appendChild(panel);\n      document.body.appendChild(launcher);\n      launcher.addEventListener(\'click\',()=>panel.classList.toggle(\'is-hidden\'));\n      panel.querySelector(\'.lt-reglog-close\').addEventListener(\'click\',()=>panel.classList.add(\'is-hidden\'));\n    }\n\n    function removePanel(){\n      if(panel){ panel.remove(); panel=null; }\n      if(launcher){ launcher.remove(); launcher=null; }\n    }\n\n    function scanCards(){\n      const cards=Array.from(document.querySelectorAll(\'#ms-files-page .mp-file-card\'));\n      if(!cards.length) return;\n      let logs=readLogs();\n      cards.forEach(card=>{\n        const status=String(card.dataset.status||\'\').toLowerCase();\n        if(![\'registered\',\'probed\',\'processing\',\'completed\',\'failed\'].includes(status)) return;\n        const id=card.dataset.id;\n        const name=card.dataset.name||card.querySelector(\'.mp-name\')?.textContent||\'未知檔案\';\n        const type=card.dataset.type||\'file\';\n        const progress=Number(card.dataset.progress||0);\n        const item={id,name,type,status,progress,updatedAt:Date.now()};\n        const idx=logs.findIndex(x=>String(x.id)===String(id));\n        if(idx>=0) logs[idx]=item; else logs.unshift(item);\n      });\n      logs.sort((a,b)=>Number(b.updatedAt||0)-Number(a.updatedAt||0));\n      logs=logs.slice(0,8);\n      saveLogs(logs);\n      render();\n    }\n\n    function deleteLog(id){\n      let logs=readLogs();\n      logs=logs.filter(x=>String(x.id)!==String(id));\n      saveLogs(logs);\n      render();\n    }\n\n    function render(){\n      const body=document.getElementById(\'ltRegisterLogBody\');\n      if(!body) return;\n      const logs=readLogs();\n      if(!logs.length){ body.innerHTML=\'<div class=\"lt-reglog-empty\">目前沒有近期註冊紀錄</div>\'; return; }\n      body.innerHTML=logs.slice(0,5).map(item=>`\n        <div class=\"lt-reglog-item\">\n          <div class=\"lt-reglog-icon\">${icon(item.type,item.status)}</div>\n          <div>\n            <div class=\"lt-reglog-name\">${item.name}</div>\n            <div class=\"lt-reglog-sub\">\n              <div class=\"lt-reglog-status is-${item.status}\">${label(item.status,item.progress)}</div>\n            </div>\n          </div>\n          <button class=\"lt-reglog-delete\" data-id=\"${item.id}\" type=\"button\">×</button>\n        </div>\n      `).join(\'\');\n      body.querySelectorAll(\'.lt-reglog-delete\').forEach(btn=>{\n        btn.addEventListener(\'click\',function(e){\n          e.preventDefault();\n          e.stopPropagation();\n          deleteLog(this.dataset.id);\n        });\n      });\n    }\n\n    function updatePanelDisplay(){\n      if( window.location.pathname.includes(\'/library\') && document.querySelector(\'#ms-files-page\') ){\n        createPanel();\n        render();\n        scanCards();\n      }else{\n        removePanel();\n      }\n    }\n\n    // 监听 SPA 页面切换\n    let lastPath=location.pathname;\n    setInterval(()=>{\n      if(location.pathname!==lastPath){\n        lastPath=location.pathname;\n        updatePanelDisplay();\n      }\n    },200);\n\n    // 初次加载\n    document.addEventListener(\'DOMContentLoaded\',updatePanelDisplay);\n    window.addEventListener(\'load\',updatePanelDisplay);\n    setTimeout(updatePanelDisplay,800);\n\n  })();\n  </script>\n<?php\n});','','global',0,10,1,'2026-05-27 10:48:55',1,NULL),
(57,'LT-檔案管理-工作路径','','/**\n * LT People Files - Work Directory Path Only\n * 工作目錄只顯示路徑，不做篩選 / 不做下拉\n */\n\nadd_action(\'wp_footer\', function () {\n  ?>\n\n  <style>\n    #ms-files-page .lt-workdir-row{\n      display:flex;\n      align-items:center;\n      gap:8px;\n      margin:-8px 0 18px;\n      font-size:13px;\n      font-weight:700;\n      color:#4b5563;\n      white-space:nowrap;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n\n    #ms-files-page .lt-workdir-label{\n      color:#8a919c;\n      font-weight:600;\n    }\n\n    #ms-files-page .lt-workdir-path span{\n      color:#8a919c;\n      font-weight:600;\n      margin:0 4px;\n    }\n  </style>\n\n  <script>\n  (function(){\n\n    function waitForFilesPage(){\n      let tries = 0;\n\n      const timer = setInterval(function(){\n        tries++;\n\n        const root = document.getElementById(\'ms-files-page\');\n        const toolbar = root ? root.querySelector(\'.mp-toolbar\') : null;\n\n        if (root && toolbar) {\n          clearInterval(timer);\n          initWorkDirectory(root, toolbar);\n        }\n\n        if (tries > 60) {\n          clearInterval(timer);\n        }\n      }, 200);\n    }\n\n    function initWorkDirectory(root, toolbar){\n      if (!root || !toolbar) return;\n\n      const oldRow = root.querySelector(\'.lt-workdir-row\');\n      if (oldRow) oldRow.remove();\n\n      const row = document.createElement(\'div\');\n      row.className = \'lt-workdir-row\';\n\n      row.innerHTML = `\n        <span class=\"lt-workdir-label\">工作目錄：</span>\n        <span class=\"lt-workdir-path\">\n          主機 <span>&gt;</span> 路徑 <span>&gt;</span> 資料夾 <span>&gt;</span> 下載項目\n        </span>\n      `;\n\n      toolbar.insertAdjacentElement(\'afterend\', row);\n    }\n\n    document.addEventListener(\'DOMContentLoaded\', waitForFilesPage);\n    window.addEventListener(\'load\', waitForFilesPage);\n\n    setTimeout(waitForFilesPage, 500);\n    setTimeout(waitForFilesPage, 1200);\n    setTimeout(waitForFilesPage, 2000);\n\n    setInterval(function(){\n      if (!location.pathname.includes(\'library\')) return;\n\n      const root = document.getElementById(\'ms-files-page\');\n      if (!root) return;\n\n      const workdirRow = root.querySelector(\'.lt-workdir-row\');\n\n      if (!workdirRow) {\n        waitForFilesPage();\n      }\n    }, 800);\n\n  })();\n  </script>\n\n  <?php\n});','','global',0,10,1,'2026-05-20 06:16:29',1,NULL),
(58,'LT-檔案管理-篩選功能','','/**\n * Library - Filter Only - Slider + View Switch Version\n * 只加強 library 頁面的右側篩選功能\n *\n * 新增：\n * 1. 右側篩選面板上方加入三種視圖切換\n *    - 九宮格 / 卡片視圖\n *    - 列表視圖\n *    - 詳細列表視圖\n *\n * 注意：\n * 1. 原本 People Files 主 PHP 不要刪\n * 2. 原本 HTML 不用重貼\n * 3. 這份只處理篩選與視圖，不動註冊 / 檢測 / Completed / Failed / 底層資料\n */\n\nadd_action(\'wp_footer\', function () {\n\n \n  ?>\n\n  <style>\n    /* =========================================\n       LT People Files - Filter Only Slider CSS\n       只影響右側篩選面板 + 檔案視圖樣式\n       ========================================= */\n\n    #ms-files-page .mp-filter-pop{\n      width:300px;\n      max-height:620px;\n      overflow-y:auto;\n      padding:22px 22px 24px;\n    }\n\n    #ms-files-page .mp-radio-row,\n    #ms-files-page .mp-check-row{\n      min-height:24px;\n      margin-bottom:4px;\n      cursor:pointer;\n    }\n\n    #ms-files-page .mp-filter-title{\n      font-size:15px;\n      font-weight:700;\n      color:#4b4f56;\n      margin:22px 0 10px;\n    }\n\n    #ms-files-page .mp-filter-title:first-child{\n      margin-top:0;\n    }\n\n    /* =========================================\n       View Switcher - 視圖切換\n       ========================================= */\n\n    #ms-files-page .mp-view-switcher{\n      display:flex;\n      justify-content:flex-end;\n      align-items:center;\n      gap:10px;\n      padding:0 0 18px;\n      margin-bottom:2px;\n      border-bottom:1px solid rgba(0,0,0,.06);\n    }\n\n    #ms-files-page .mp-view-btn{\n      width:34px;\n      height:34px;\n      border:0;\n      background:transparent;\n      color:#b8bcc2;\n      border-radius:10px;\n      cursor:pointer;\n      display:flex;\n      align-items:center;\n      justify-content:center;\n      padding:0;\n      transition:background .18s ease, color .18s ease, transform .18s ease;\n      outline:none !important;\n      box-shadow:none !important;\n    }\n\n    #ms-files-page .mp-view-btn:hover{\n      background:#f2f4f7;\n      color:#6f747b;\n    }\n\n    #ms-files-page .mp-view-btn.is-active{\n      color:#4b4f56;\n      background:#eef3f9;\n    }\n\n    #ms-files-page .mp-view-btn:focus,\n    #ms-files-page .mp-view-btn:active,\n    #ms-files-page .mp-view-btn:focus-visible{\n      outline:none !important;\n      box-shadow:none !important;\n    }\n\n    #ms-files-page .mp-view-icon-grid{\n      width:22px;\n      height:22px;\n      display:grid;\n      grid-template-columns:repeat(3, 1fr);\n      gap:3px;\n    }\n\n    #ms-files-page .mp-view-icon-grid span{\n      display:block;\n      border-radius:1px;\n      background:currentColor;\n    }\n\n    #ms-files-page .mp-view-icon-list{\n      width:24px;\n      height:22px;\n      display:flex;\n      flex-direction:column;\n      justify-content:space-between;\n    }\n\n    #ms-files-page .mp-view-icon-list span{\n      display:block;\n      height:3px;\n      border-radius:99px;\n      background:currentColor;\n      position:relative;\n      margin-left:8px;\n    }\n\n    #ms-files-page .mp-view-icon-list span::before{\n      content:\"\";\n      position:absolute;\n      left:-8px;\n      top:0;\n      width:4px;\n      height:3px;\n      border-radius:1px;\n      background:currentColor;\n    }\n\n    #ms-files-page .mp-view-icon-detail{\n      width:24px;\n      height:22px;\n      display:flex;\n      flex-direction:column;\n      justify-content:space-between;\n    }\n\n    #ms-files-page .mp-view-icon-detail span{\n      display:block;\n      height:2px;\n      border-radius:99px;\n      background:currentColor;\n    }\n\n    /* =========================================\n       Grid View - 原本卡片視圖\n       ========================================= */\n\n    #ms-files-page #mpGrid.mp-view-grid{\n      display:grid;\n    }\n\n    /* =========================================\n   List View - Apple Finder Style\n   ========================================= */\n\n#ms-files-page #mpGrid.mp-view-list,\n#ms-files-page #mpGrid.mp-view-detail{\n  display:flex !important;\n  flex-direction:column;\n  gap:0 !important;\n  width:100%;\n  max-width:980px;\n  border-radius:0;\n  overflow:hidden;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card{\n  width:100% !important;\n  height:28px !important;\n  min-height:28px !important;\n  max-height:28px !important;\n  display:grid !important;\n  grid-template-columns:88px 24px minmax(260px, 1fr) 190px 90px 90px;\n  align-items:center;\n  gap:8px;\n  padding:0 10px !important;\n  margin:0 !important;\n  border:0 !important;\n  border-radius:0 !important;\n  box-shadow:none !important;\n  background:#fff;\n  overflow:hidden !important;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card:nth-child(even),\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card:nth-child(even){\n  background:#f3f3f3;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card:hover,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card:hover{\n  background:#eaf3ff;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card.is-selected,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card.is-selected{\n  background:#dcecff !important;\n}\n\n/* 第一欄：狀態 */\n#ms-files-page #mpGrid.mp-view-list .mp-file-card::before,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card::before{\n  content:attr(data-status);\n  font-size:11px;\n  font-weight:700;\n  color:#6f747b;\n  text-transform:capitalize;\n  white-space:nowrap;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card[data-status=\"completed\"]::before,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card[data-status=\"completed\"]::before,\n#ms-files-page #mpGrid.mp-view-list .mp-file-card[data-status=\"registered\"]::before,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card[data-status=\"registered\"]::before{\n  color:#4e7ec9;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card[data-status=\"failed\"]::before,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card[data-status=\"failed\"]::before{\n  color:#d64545;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card[data-status=\"processing\"]::before,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card[data-status=\"processing\"]::before{\n  color:#9a6a1f;\n}\n\n/* 小圖示，不要大縮圖 */\n#ms-files-page #mpGrid.mp-view-list .mp-thumb,\n#ms-files-page #mpGrid.mp-view-list .mp-file-thumb,\n#ms-files-page #mpGrid.mp-view-list .mp-card-thumb,\n#ms-files-page #mpGrid.mp-view-list .mp-preview,\n#ms-files-page #mpGrid.mp-view-detail .mp-thumb,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-thumb,\n#ms-files-page #mpGrid.mp-view-detail .mp-card-thumb,\n#ms-files-page #mpGrid.mp-view-detail .mp-preview{\n  width:18px !important;\n  height:18px !important;\n  min-width:18px !important;\n  max-width:18px !important;\n  border-radius:3px !important;\n  object-fit:cover !important;\n  overflow:hidden !important;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-file-card img,\n#ms-files-page #mpGrid.mp-view-list .mp-file-card video,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card img,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card video{\n  width:18px !important;\n  height:18px !important;\n  min-width:18px !important;\n  max-width:18px !important;\n  object-fit:cover !important;\n  border-radius:3px !important;\n}\n\n/* 檔名 */\n#ms-files-page #mpGrid.mp-view-list .mp-file-name,\n#ms-files-page #mpGrid.mp-view-list .mp-card-title,\n#ms-files-page #mpGrid.mp-view-list .mp-title,\n#ms-files-page #mpGrid.mp-view-detail .mp-file-name,\n#ms-files-page #mpGrid.mp-view-detail .mp-card-title,\n#ms-files-page #mpGrid.mp-view-detail .mp-title{\n  font-size:13px !important;\n  font-weight:600 !important;\n  color:#30343a !important;\n  white-space:nowrap !important;\n  overflow:hidden !important;\n  text-overflow:ellipsis !important;\n  line-height:28px !important;\n}\n\n/* 詳細資料欄位 */\n#ms-files-page #mpGrid.mp-view-list .mp-detail-row,\n#ms-files-page #mpGrid.mp-view-detail .mp-detail-row{\n  font-size:12px !important;\n  color:#8a8f98 !important;\n  line-height:28px !important;\n  height:28px !important;\n  margin:0 !important;\n  padding:0 !important;\n  white-space:nowrap !important;\n  overflow:hidden !important;\n  text-overflow:ellipsis !important;\n}\n\n/* 詳細列表更矮一點 */\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card{\n  height:24px !important;\n  min-height:24px !important;\n  max-height:24px !important;\n  grid-template-columns:88px 22px minmax(260px, 1fr) 190px 90px 90px;\n}\n\n#ms-files-page #mpGrid.mp-view-detail .mp-file-name,\n#ms-files-page #mpGrid.mp-view-detail .mp-card-title,\n#ms-files-page #mpGrid.mp-view-detail .mp-title,\n#ms-files-page #mpGrid.mp-view-detail .mp-detail-row{\n  line-height:24px !important;\n  height:24px !important;\n  font-size:12px !important;\n}\n\n    /* 手機或窄畫面時，列表不要爆版 */\n    @media (max-width: 900px){\n      #ms-files-page #mpGrid.mp-view-list .mp-file-card,\n      #ms-files-page #mpGrid.mp-view-detail .mp-file-card{\n        grid-template-columns:72px minmax(120px, 1fr);\n      }\n\n      #ms-files-page #mpGrid.mp-view-list .mp-detail-row,\n      #ms-files-page #mpGrid.mp-view-detail .mp-detail-row{\n        display:none !important;\n      }\n    }\n\n    /* =========================================\n       Slider Style - 細滑桿版本\n       ========================================= */\n\n    #ms-files-page .mp-slider-block{\n      margin:8px 0 22px;\n      padding:0 4px;\n    }\n\n    #ms-files-page .mp-range-values{\n      display:flex;\n      justify-content:space-between;\n      align-items:center;\n      font-size:11px;\n      font-weight:600;\n      color:#6f747b;\n      margin-top:6px;\n      padding:0 2px;\n    }\n\n    #ms-files-page .mp-dual-range{\n      position:relative;\n      height:28px;\n      display:flex;\n      align-items:center;\n      margin-top:6px;\n    }\n\n    #ms-files-page .mp-dual-range::before{\n      content:\"\";\n      position:absolute;\n      left:0;\n      right:0;\n      top:13px;\n      height:2px;\n      border-radius:999px;\n      background:#e3e5e8;\n      pointer-events:none;\n    }\n\n    #ms-files-page .mp-range-track{\n      position:absolute;\n      top:13px;\n      height:2px;\n      border-radius:999px;\n      background:#8fbef8;\n      left:0%;\n      right:0%;\n      pointer-events:none;\n      z-index:1;\n    }\n\n    #ms-files-page .mp-range-input{\n      position:absolute;\n      left:0;\n      top:0;\n      width:100%;\n      height:28px;\n      margin:0;\n      background:transparent;\n      pointer-events:none;\n      appearance:none;\n      -webkit-appearance:none;\n      z-index:2;\n      outline:none !important;\n      box-shadow:none !important;\n    }\n\n    #ms-files-page .mp-range-input::-webkit-slider-thumb{\n      appearance:none;\n      -webkit-appearance:none;\n      width:16px;\n      height:16px;\n      border-radius:50%;\n      background:#5f8fd6;\n      border:2.5px solid #ffffff;\n      cursor:pointer;\n      pointer-events:auto;\n      box-shadow:0 1px 5px rgba(0,0,0,.20);\n      margin-top:-7px;\n    }\n\n    #ms-files-page .mp-range-input::-moz-range-thumb{\n      width:16px;\n      height:16px;\n      border-radius:50%;\n      background:#5f8fd6;\n      border:2.5px solid #ffffff;\n      cursor:pointer;\n      pointer-events:auto;\n      box-shadow:0 1px 5px rgba(0,0,0,.20);\n    }\n\n    #ms-files-page .mp-range-input::-webkit-slider-runnable-track{\n      height:2px;\n      background:transparent;\n      border:none;\n    }\n\n    #ms-files-page .mp-range-input::-moz-range-track{\n      height:2px;\n      background:transparent;\n      border:none;\n    }\n\n    #ms-files-page .mp-filter-reset{\n      width:100%;\n      height:38px;\n      margin-top:8px;\n      border:1px solid #d8dce3;\n      background:#fff;\n      color:#5f6368;\n      border-radius:14px;\n      font-size:13px;\n      font-weight:600;\n      cursor:pointer;\n    }\n\n    #ms-files-page .mp-filter-reset:hover{\n      background:#f6f7f9;\n    }\n\n    #ms-files-page .mp-filter-pop input,\n    #ms-files-page .mp-filter-pop input:focus,\n    #ms-files-page .mp-filter-pop input:active,\n    #ms-files-page .mp-filter-pop input:focus-visible{\n      outline:none !important;\n      box-shadow:none !important;\n    }\n  </style>\n\n  <script>\n  (function(){\n\n    const MEDIA_META_API =\n      window.location.origin +\n      \'/wp-json/wp/v2/media?per_page=100&orderby=date&order=desc&_fields=id,media_details\';\n\n    const SIZE_MAX_MB = 500;\n    const DURATION_MAX_MIN = 180;\n    const VIEW_STORAGE_KEY = \'lt_people_files_view_mode_v1\';\n\n    const FILTER_PANEL_HTML = `\n      <div class=\"mp-view-switcher\" aria-label=\"視圖切換\">\n        <button type=\"button\" class=\"mp-view-btn\" data-mp-view=\"grid\" title=\"卡片視圖\">\n          <span class=\"mp-view-icon-grid\" aria-hidden=\"true\">\n            <span></span><span></span><span></span>\n            <span></span><span></span><span></span>\n            <span></span><span></span><span></span>\n          </span>\n        </button>\n\n       <button type=\"button\" class=\"mp-view-btn\" data-mp-view=\"archive\" title=\"圖文詳細視圖\">\n          <span class=\"mp-view-icon-list\" aria-hidden=\"true\">\n            <span></span><span></span><span></span><span></span>\n          </span>\n        </button>\n\n      <button type=\"button\" class=\"mp-view-btn\" data-mp-view=\"list\" title=\"列表視圖\">\n          <span class=\"mp-view-icon-detail\" aria-hidden=\"true\">\n            <span></span><span></span><span></span><span></span><span></span>\n          </span>\n        </button>\n      </div>\n\n      <div class=\"mp-filter-title\">排序方式</div>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"time_desc\" checked>\n        依時間・由近到遠\n      </label>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"time_asc\">\n        依時間・由遠到近\n      </label>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"size_desc\">\n        依大小・由大到小\n      </label>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"size_asc\">\n        依大小・由小到大\n      </label>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"name_asc\">\n        依檔名・由 A 到 Z\n      </label>\n\n      <label class=\"mp-radio-row\">\n        <input type=\"radio\" name=\"mp-sort\" value=\"name_desc\">\n        依檔名・由 Z 到 A\n      </label>\n\n      <div class=\"mp-filter-title\">過濾方式</div>\n\n      <label class=\"mp-check-row\">\n        <input type=\"checkbox\" id=\"mpFilterUnregistered\">\n        未註冊\n      </label>\n\n      <label class=\"mp-check-row\">\n        <input type=\"checkbox\" id=\"mpFilterRegistered\">\n        已註冊\n      </label>\n\n      <label class=\"mp-check-row\">\n        <input type=\"checkbox\" id=\"mpOnlyVideos\">\n        僅顯示影片\n      </label>\n\n      <label class=\"mp-check-row\">\n        <input type=\"checkbox\" id=\"mpOnlyPhotos\">\n        僅顯示文字檔案\n      </label>\n\n      <div class=\"mp-filter-title\">大小</div>\n\n      <div class=\"mp-slider-block\">\n        <div class=\"mp-dual-range\" data-range-group=\"size\">\n          <div class=\"mp-range-track\" id=\"mpSizeTrack\"></div>\n          <input type=\"range\" class=\"mp-range-input\" id=\"mpSizeMin\" min=\"0\" max=\"${SIZE_MAX_MB}\" step=\"1\" value=\"0\">\n          <input type=\"range\" class=\"mp-range-input\" id=\"mpSizeMax\" min=\"0\" max=\"${SIZE_MAX_MB}\" step=\"1\" value=\"${SIZE_MAX_MB}\">\n        </div>\n\n        <div class=\"mp-range-values\">\n          <span id=\"mpSizeMinLabel\">0 KB</span>\n          <span id=\"mpSizeMaxLabel\">不限</span>\n        </div>\n      </div>\n\n      <div class=\"mp-filter-title\">影片時長</div>\n\n      <div class=\"mp-slider-block\">\n        <div class=\"mp-dual-range\" data-range-group=\"duration\">\n          <div class=\"mp-range-track\" id=\"mpDurationTrack\"></div>\n          <input type=\"range\" class=\"mp-range-input\" id=\"mpDurationMin\" min=\"0\" max=\"${DURATION_MAX_MIN}\" step=\"1\" value=\"0\">\n          <input type=\"range\" class=\"mp-range-input\" id=\"mpDurationMax\" min=\"0\" max=\"${DURATION_MAX_MIN}\" step=\"1\" value=\"${DURATION_MAX_MIN}\">\n        </div>\n\n        <div class=\"mp-range-values\">\n          <span id=\"mpDurationMinLabel\">0 分鐘</span>\n          <span id=\"mpDurationMaxLabel\">不限</span>\n        </div>\n      </div>\n\n      <button type=\"button\" class=\"mp-filter-reset\" id=\"mpFilterReset\">\n        清除篩選\n      </button>\n    `;\n\n    let mediaMetaMap = {};\n    let observer = null;\n    let isApplyingFilter = false;\n\n    function parseDurationSeconds(value){\n      if (value === null || value === undefined || value === \'\') return 0;\n\n      if (typeof value === \'number\') return value;\n\n      const str = String(value || \'\').trim();\n\n      if (!str) return 0;\n\n      if (/^\\d+(\\.\\d+)?$/.test(str)) {\n        return Number(str);\n      }\n\n      const parts = str.split(\':\').map(function(part){\n        return Number(part || 0);\n      });\n\n      if (parts.length === 3) {\n        return parts[0] * 3600 + parts[1] * 60 + parts[2];\n      }\n\n      if (parts.length === 2) {\n        return parts[0] * 60 + parts[1];\n      }\n\n      return 0;\n    }\n\n    function parseSizeTextToBytes(text){\n      const raw = String(text || \'\').trim().toLowerCase();\n\n      if (!raw || raw === \'-\') return 0;\n\n      const num = parseFloat(raw.replace(/,/g, \'\'));\n\n      if (isNaN(num)) return 0;\n\n      if (raw.includes(\'gb\')) return num * 1024 * 1024 * 1024;\n      if (raw.includes(\'mb\')) return num * 1024 * 1024;\n      if (raw.includes(\'kb\')) return num * 1024;\n      if (raw.includes(\'b\')) return num;\n\n      return num;\n    }\n\n    function formatSizeLabel(mb, isMax){\n      const n = Number(mb || 0);\n\n      if (isMax && n >= SIZE_MAX_MB) return \'不限\';\n\n      if (n <= 0) return \'0 KB\';\n      if (n < 1) return Math.round(n * 1024) + \' KB\';\n\n      return Math.round(n) + \' MB\';\n    }\n\n    function formatDurationLabel(min, isMax){\n      const n = Number(min || 0);\n\n      if (isMax && n >= DURATION_MAX_MIN) return \'不限\';\n\n      return Math.round(n) + \' 分鐘\';\n    }\n\n    function getDetailValue(card, label){\n      const rows = Array.from(card.querySelectorAll(\'.mp-detail-row\'));\n\n      for (const row of rows) {\n        const text = row.textContent || \'\';\n\n        if (text.indexOf(label) === 0) {\n          return text.replace(label, \'\').trim();\n        }\n      }\n\n      return \'\';\n    }\n\n    function isRegisteredLike(statusValue){\n  statusValue = String(statusValue || \'\').toLowerCase().trim();\n\n  return (\n    statusValue === \'registered\' ||\n    statusValue === \'complete\' ||\n    statusValue === \'completed\' ||\n    statusValue === \'probed\' ||\n    statusValue === \'processing\' ||\n    statusValue === \'failed\'\n  );\n}\n\n    function getRoot(){\n      return document.getElementById(\'ms-files-page\');\n    }\n\n    function getGrid(){\n      const root = getRoot();\n      return root ? root.querySelector(\'#mpGrid\') : null;\n    }\n\n    function getCards(){\n      const grid = getGrid();\n      return grid ? Array.from(grid.querySelectorAll(\'.mp-file-card\')) : [];\n    }\n\n    function getCardMeta(card){\n      const id = String(card.dataset.id || \'\');\n      const saved = mediaMetaMap[id] || {};\n\n      let sizeBytes = Number(saved.size || 0);\n      let durationSeconds = Number(saved.duration || 0);\n\n      if (!sizeBytes) {\n        const sizeText = getDetailValue(card, \'大小：\');\n        sizeBytes = parseSizeTextToBytes(sizeText);\n      }\n\n      return {\n        id: id,\n        sizeBytes: sizeBytes,\n        sizeMb: sizeBytes / 1024 / 1024,\n        durationSeconds: durationSeconds,\n        durationMinutes: durationSeconds / 60\n      };\n    }\n\n    function getCurrentView(){\n  const saved = localStorage.getItem(VIEW_STORAGE_KEY);\n\n  if (saved === \'grid\' || saved === \'archive\' || saved === \'list\') {\n    return saved;\n  }\n\n  return \'grid\';\n}\n\n    function setGridView(view){\n      const root = getRoot();\n      const grid = getGrid();\n\n      if (!root || !grid) return;\n\n    if (view !== \'grid\' && view !== \'list\' && view !== \'archive\') {\n  view = \'grid\';\n}\n\ngrid.classList.remove(\'mp-view-grid\', \'mp-view-list\', \'mp-view-detail\', \'mp-view-archive\');\ngrid.classList.add(\'mp-view-\' + view);\n\n      localStorage.setItem(VIEW_STORAGE_KEY, view);\n\n      Array.from(root.querySelectorAll(\'.mp-view-btn\')).forEach(function(btn){\n        btn.classList.toggle(\'is-active\', btn.dataset.mpView === view);\n      });\n    }\n\n    function syncDualRange(minEl, maxEl){\n      if (!minEl || !maxEl) return;\n\n      let minValue = Number(minEl.value || 0);\n      let maxValue = Number(maxEl.value || 0);\n\n      if (minValue > maxValue) {\n        const activeId = document.activeElement ? document.activeElement.id : \'\';\n\n        if (activeId === minEl.id) {\n          maxValue = minValue;\n          maxEl.value = String(maxValue);\n        } else {\n          minValue = maxValue;\n          minEl.value = String(minValue);\n        }\n      }\n    }\n\n    function updateSliderUI(){\n      const root = getRoot();\n\n      if (!root) return;\n\n      const sizeMin = root.querySelector(\'#mpSizeMin\');\n      const sizeMax = root.querySelector(\'#mpSizeMax\');\n      const sizeTrack = root.querySelector(\'#mpSizeTrack\');\n      const sizeMinLabel = root.querySelector(\'#mpSizeMinLabel\');\n      const sizeMaxLabel = root.querySelector(\'#mpSizeMaxLabel\');\n\n      const durationMin = root.querySelector(\'#mpDurationMin\');\n      const durationMax = root.querySelector(\'#mpDurationMax\');\n      const durationTrack = root.querySelector(\'#mpDurationTrack\');\n      const durationMinLabel = root.querySelector(\'#mpDurationMinLabel\');\n      const durationMaxLabel = root.querySelector(\'#mpDurationMaxLabel\');\n\n      if (sizeMin && sizeMax) {\n        syncDualRange(sizeMin, sizeMax);\n\n        const min = Number(sizeMin.value || 0);\n        const max = Number(sizeMax.value || SIZE_MAX_MB);\n\n        const minPercent = (min / SIZE_MAX_MB) * 100;\n        const maxPercent = (max / SIZE_MAX_MB) * 100;\n\n        if (sizeTrack) {\n          sizeTrack.style.left = minPercent + \'%\';\n          sizeTrack.style.right = (100 - maxPercent) + \'%\';\n        }\n\n        if (sizeMinLabel) sizeMinLabel.textContent = formatSizeLabel(min, false);\n        if (sizeMaxLabel) sizeMaxLabel.textContent = formatSizeLabel(max, true);\n      }\n\n      if (durationMin && durationMax) {\n        syncDualRange(durationMin, durationMax);\n\n        const min = Number(durationMin.value || 0);\n        const max = Number(durationMax.value || DURATION_MAX_MIN);\n\n        const minPercent = (min / DURATION_MAX_MIN) * 100;\n        const maxPercent = (max / DURATION_MAX_MIN) * 100;\n\n        if (durationTrack) {\n          durationTrack.style.left = minPercent + \'%\';\n          durationTrack.style.right = (100 - maxPercent) + \'%\';\n        }\n\n        if (durationMinLabel) durationMinLabel.textContent = formatDurationLabel(min, false);\n        if (durationMaxLabel) durationMaxLabel.textContent = formatDurationLabel(max, true);\n      }\n    }\n\n    function getSliderNumber(selector, maxValue){\n      const root = getRoot();\n      const el = root ? root.querySelector(selector) : null;\n\n      if (!el) return null;\n\n      const value = Number(el.value);\n\n      if (isNaN(value)) return null;\n\n      if (value >= maxValue) return null;\n\n      return value;\n    }\n\n    function getSliderMinNumber(selector){\n      const root = getRoot();\n      const el = root ? root.querySelector(selector) : null;\n\n      if (!el) return null;\n\n      const value = Number(el.value);\n\n      if (isNaN(value) || value <= 0) return null;\n\n      return value;\n    }\n\n    function getCurrentFilterState(){\n      const root = getRoot();\n\n      if (!root) return {};\n\n      updateSliderUI();\n\n      const displayChecked = root.querySelector(\'input[name=\"mp-display-filter\"]:checked\');\n      const sortChecked = root.querySelector(\'input[name=\"mp-sort\"]:checked\');\n\n      return {\n        keyword: root.querySelector(\'#mpSearchInput\') ? root.querySelector(\'#mpSearchInput\').value.trim().toLowerCase() : \'\',\n        displayFilter: displayChecked ? displayChecked.value : \'all\',\n        sort: sortChecked ? sortChecked.value : \'time_desc\',\n\n        onlyVideos: !!(root.querySelector(\'#mpOnlyVideos\') && root.querySelector(\'#mpOnlyVideos\').checked),\n        onlyDocs: !!(root.querySelector(\'#mpOnlyPhotos\') && root.querySelector(\'#mpOnlyPhotos\').checked),\n\n        onlyRegistered: !!(root.querySelector(\'#mpFilterRegistered\') && root.querySelector(\'#mpFilterRegistered\').checked),\n        onlyUnregistered: !!(root.querySelector(\'#mpFilterUnregistered\') && root.querySelector(\'#mpFilterUnregistered\').checked),\n\n        sizeMinMb: getSliderMinNumber(\'#mpSizeMin\'),\n        sizeMaxMb: getSliderNumber(\'#mpSizeMax\', SIZE_MAX_MB),\n\n        durationMinMinutes: getSliderMinNumber(\'#mpDurationMin\'),\n        durationMaxMinutes: getSliderNumber(\'#mpDurationMax\', DURATION_MAX_MIN)\n      };\n    }\n\n    function cardPassesFilters(card, state){\n      const type = String(card.dataset.type || \'\').toLowerCase();\n      const status = String(card.dataset.status || \'\').toLowerCase();\n      const name = String(card.dataset.name || \'\').toLowerCase();\n      const source = String(card.dataset.source || \'\').toLowerCase();\n\n      const detailText = String(card.textContent || \'\').toLowerCase();\n\n      if (state.keyword) {\n        const searchableText = [\n          name,\n          source,\n          type,\n          status,\n          detailText\n        ].join(\' \');\n\n        if (!searchableText.includes(state.keyword)) return false;\n      }\n\n      if (state.displayFilter === \'video\' && type !== \'video\') return false;\n      if (state.displayFilter === \'document\' && type !== \'document\') return false;\n\n      if (state.onlyVideos && type !== \'video\') return false;\n      if (state.onlyDocs && type !== \'document\') return false;\n\n      const registered = isRegisteredLike(status);\n\n      if (state.onlyRegistered && !state.onlyUnregistered && !registered) return false;\n      if (state.onlyUnregistered && !state.onlyRegistered && registered) return false;\n\n      const meta = getCardMeta(card);\n\n      if (state.sizeMinMb !== null && meta.sizeMb < state.sizeMinMb) return false;\n      if (state.sizeMaxMb !== null && meta.sizeMb > state.sizeMaxMb) return false;\n\n      if (type === \'video\') {\n        const hasDurationFilter =\n          state.durationMinMinutes !== null ||\n          state.durationMaxMinutes !== null;\n\n        if (hasDurationFilter && !meta.durationSeconds) return false;\n\n        if (\n          state.durationMinMinutes !== null &&\n          meta.durationMinutes < state.durationMinMinutes\n        ) {\n          return false;\n        }\n\n        if (\n          state.durationMaxMinutes !== null &&\n          meta.durationMinutes > state.durationMaxMinutes\n        ) {\n          return false;\n        }\n      }\n\n      return true;\n    }\n\n    function sortCards(cards, state){\n      return cards.sort(function(a, b){\n        const nameA = String(a.dataset.name || \'\');\n        const nameB = String(b.dataset.name || \'\');\n\n        const metaA = getCardMeta(a);\n        const metaB = getCardMeta(b);\n\n        const dateA = getDetailValue(a, \'上傳日期：\') || \'\';\n        const dateB = getDetailValue(b, \'上傳日期：\') || \'\';\n\n        const timeA = new Date(dateA).getTime() || 0;\n        const timeB = new Date(dateB).getTime() || 0;\n\n        if (state.sort === \'name_asc\') return nameA.localeCompare(nameB);\n        if (state.sort === \'name_desc\') return nameB.localeCompare(nameA);\n\n        if (state.sort === \'size_desc\') return metaB.sizeBytes - metaA.sizeBytes;\n        if (state.sort === \'size_asc\') return metaA.sizeBytes - metaB.sizeBytes;\n\n        if (state.sort === \'time_asc\') return timeA - timeB;\n\n        return timeB - timeA;\n      });\n    }\n\n    function clearSelectedCards(){\n      const root = getRoot();\n\n      if (!root) return;\n\n      Array.from(root.querySelectorAll(\'.mp-file-card.is-selected\')).forEach(function(card){\n        card.classList.remove(\'is-selected\');\n      });\n\n      const registerBtn = root.querySelector(\'#mpAddToPeople\');\n\n      if (registerBtn) {\n        registerBtn.textContent = \'註冊\';\n      }\n    }\n\n    function updateStatusText(visibleCount){\n      const root = getRoot();\n\n      if (!root) return;\n\n      const status = root.querySelector(\'#mpStatus\');\n\n      if (!status) return;\n\n      if (visibleCount === 0) {\n        status.textContent = \'沒有符合篩選條件的影片或文件。\';\n        status.classList.add(\'show\');\n      } else {\n        if (status.textContent === \'沒有符合篩選條件的影片或文件。\') {\n          status.textContent = \'\';\n          status.classList.remove(\'show\');\n        }\n      }\n    }\n\n   function applyEnhancedFilters(){\n  const grid = getGrid();\n\n  if (!grid || isApplyingFilter) return;\n\n  const cards = getCards();\n\n  if (!cards.length) return;\n\n  const state = getCurrentFilterState();\n\n  let visibleCount = 0;\n\n  cards.forEach(function(card){\n    const pass = cardPassesFilters(card, state);\n\n    card.style.display = pass ? \'\' : \'none\';\n    card.dataset.filterVisible = pass ? \'1\' : \'0\';\n\n    if (pass) visibleCount++;\n  });\n\n  const sortedCards = sortCards(cards, state);\n\n  isApplyingFilter = true;\n\n  sortedCards.forEach(function(card){\n    grid.appendChild(card);\n  });\n\n  setTimeout(function(){\n    isApplyingFilter = false;\n\n    setGridView(getCurrentView());\n\n    // 重要：讓列表 / 詳細 / 圖文詳細視圖重新吃到篩選結果\n    window.dispatchEvent(new CustomEvent(\'ltPeopleFilesFiltered\'));\n  }, 0);\n\n  updateStatusText(visibleCount);\n}\n\n    function debounce(fn, wait){\n      let timer = null;\n\n      return function(){\n        clearTimeout(timer);\n\n        timer = setTimeout(function(){\n          fn();\n        }, wait || 80);\n      };\n    }\n\n    const debouncedApply = debounce(applyEnhancedFilters, 80);\n\n    async function loadMediaMeta(){\n      try {\n        const res = await fetch(MEDIA_META_API, {\n          method: \'GET\',\n          credentials: \'same-origin\'\n        });\n\n        if (!res.ok) return;\n\n        const data = await res.json();\n\n        if (!Array.isArray(data)) return;\n\n        const nextMap = {};\n\n        data.forEach(function(item){\n          const details = item.media_details || {};\n\n          const duration = parseDurationSeconds(\n            details.length ||\n            details.length_formatted ||\n            details.duration\n          );\n\n          nextMap[String(item.id)] = {\n            size: Number(details.filesize || 0),\n            duration: duration\n          };\n        });\n\n        mediaMetaMap = nextMap;\n\n        updateSliderUI();\n        debouncedApply();\n\n      } catch(e) {\n        console.warn(\'[LT Filter Slider + View] media meta load failed:\', e);\n      }\n    }\n\n    function replaceFilterPanel(){\n      const root = getRoot();\n\n      if (!root) return false;\n\n      const filterPop = root.querySelector(\'#mpFilterPop\');\n\n      if (!filterPop) return false;\n\n      if (filterPop.dataset.ltFilterOnlyReady === \'slider-view-v1\') {\n        setGridView(getCurrentView());\n        return true;\n      }\n\n      filterPop.innerHTML = FILTER_PANEL_HTML;\nfilterPop.dataset.ltFilterOnlyReady = \'slider-view-v1\';\n\n/* 預設顯示已註冊 */\nconst registered = root.querySelector(\'#mpFilterRegistered\');\nconst unregistered = root.querySelector(\'#mpFilterUnregistered\');\n\nif (registered) registered.checked = true;\nif (unregistered) unregistered.checked = false;\n\nupdateSliderUI();\nsetGridView(getCurrentView());\n      return true;\n    }\n\n    function bindFilterEvents(){\n      const root = getRoot();\n\n      if (!root) return false;\n\n      if (root.dataset.ltFilterOnlyBound === \'slider-view-v1\') {\n        return true;\n      }\n\n      root.dataset.ltFilterOnlyBound = \'slider-view-v1\';\n\n      root.addEventListener(\'click\', function(e){\n        const viewBtn = e.target.closest(\'.mp-view-btn\');\n\n        if (viewBtn && root.contains(viewBtn)) {\n          e.preventDefault();\n\n          const view = viewBtn.dataset.mpView || \'grid\';\n\n          setGridView(view);\n          return;\n        }\n\n        const resetBtn = e.target.closest(\'#mpFilterReset\');\n\n        if (resetBtn && root.contains(resetBtn)) {\n          e.preventDefault();\n\n          const registered = root.querySelector(\'#mpFilterRegistered\');\n          const unregistered = root.querySelector(\'#mpFilterUnregistered\');\n          const onlyVideos = root.querySelector(\'#mpOnlyVideos\');\n          const onlyDocs = root.querySelector(\'#mpOnlyPhotos\');\n\n          const sizeMin = root.querySelector(\'#mpSizeMin\');\n          const sizeMax = root.querySelector(\'#mpSizeMax\');\n          const durationMin = root.querySelector(\'#mpDurationMin\');\n          const durationMax = root.querySelector(\'#mpDurationMax\');\n\n          const showAll = root.querySelector(\'#mpShowAll\');\n          const timeDesc = root.querySelector(\'input[name=\"mp-sort\"][value=\"time_desc\"]\');\n\n          if (registered) registered.checked = false;\n          if (unregistered) unregistered.checked = false;\n          if (onlyVideos) onlyVideos.checked = false;\n          if (onlyDocs) onlyDocs.checked = false;\n\n          if (sizeMin) sizeMin.value = \'0\';\n          if (sizeMax) sizeMax.value = String(SIZE_MAX_MB);\n          if (durationMin) durationMin.value = \'0\';\n          if (durationMax) durationMax.value = String(DURATION_MAX_MIN);\n\n          if (showAll) showAll.checked = true;\n          if (timeDesc) timeDesc.checked = true;\n\n          updateSliderUI();\n          clearSelectedCards();\n          debouncedApply();\n        }\n      });\n\n      root.addEventListener(\'input\', function(e){\n        const el = e.target;\n\n        if (!el) return;\n\n        if (\n          el.matches(\'#mpSearchInput\') ||\n          el.matches(\'#mpSizeMin\') ||\n          el.matches(\'#mpSizeMax\') ||\n          el.matches(\'#mpDurationMin\') ||\n          el.matches(\'#mpDurationMax\') ||\n          el.matches(\'#mpFilterRegistered\') ||\n          el.matches(\'#mpFilterUnregistered\') ||\n          el.matches(\'#mpOnlyVideos\') ||\n          el.matches(\'#mpOnlyPhotos\') ||\n          el.matches(\'input[name=\"mp-display-filter\"]\') ||\n          el.matches(\'input[name=\"mp-sort\"]\')\n        ) {\n          updateSliderUI();\n          clearSelectedCards();\n          debouncedApply();\n        }\n      });\n\n      root.addEventListener(\'change\', function(e){\n        const el = e.target;\n\n        if (!el) return;\n\n        if (el.id === \'mpOnlyVideos\' && el.checked) {\n          const docs = root.querySelector(\'#mpOnlyPhotos\');\n          if (docs) docs.checked = false;\n        }\n\n        if (el.id === \'mpOnlyPhotos\' && el.checked) {\n          const videos = root.querySelector(\'#mpOnlyVideos\');\n          if (videos) videos.checked = false;\n        }\n\n        if (\n          el.matches(\'#mpSearchInput\') ||\n          el.matches(\'#mpSizeMin\') ||\n          el.matches(\'#mpSizeMax\') ||\n          el.matches(\'#mpDurationMin\') ||\n          el.matches(\'#mpDurationMax\') ||\n          el.matches(\'#mpFilterRegistered\') ||\n          el.matches(\'#mpFilterUnregistered\') ||\n          el.matches(\'#mpOnlyVideos\') ||\n          el.matches(\'#mpOnlyPhotos\') ||\n          el.matches(\'input[name=\"mp-display-filter\"]\') ||\n          el.matches(\'input[name=\"mp-sort\"]\')\n        ) {\n          updateSliderUI();\n          clearSelectedCards();\n          debouncedApply();\n        }\n      });\n\n      const refreshBtn = root.querySelector(\'#mpRefreshBtn\');\n\n      if (refreshBtn && !refreshBtn.dataset.ltFilterRefreshBound) {\n        refreshBtn.dataset.ltFilterRefreshBound = \'1\';\n\n        refreshBtn.addEventListener(\'click\', function(){\n          setTimeout(function(){\n            replaceFilterPanel();\n            bindFilterEvents();\n            loadMediaMeta();\n            updateSliderUI();\n            debouncedApply();\n            setGridView(getCurrentView());\n          }, 500);\n        });\n      }\n\n      updateSliderUI();\n      setGridView(getCurrentView());\n\n      return true;\n    }\n\n    function observeGrid(){\n      const grid = getGrid();\n\n      if (!grid) return false;\n\n      if (observer) observer.disconnect();\n\n      observer = new MutationObserver(function(){\n        if (isApplyingFilter) return;\n\n        updateSliderUI();\n        debouncedApply();\n        setGridView(getCurrentView());\n      });\n\n      observer.observe(grid, {\n        childList: true\n      });\n\n      return true;\n    }\n\n    function bootFilterOnly(){\n      const root = getRoot();\n\n      if (!root) return false;\n\n      replaceFilterPanel();\n      bindFilterEvents();\n      observeGrid();\n      loadMediaMeta();\n\n      setGridView(getCurrentView());\n\n      setTimeout(updateSliderUI, 100);\n      setTimeout(debouncedApply, 200);\n      setTimeout(function(){\n        setGridView(getCurrentView());\n      }, 300);\n\n      setTimeout(debouncedApply, 800);\n      setTimeout(debouncedApply, 1500);\n\n      return true;\n    }\n\n    function start(){\n      let tries = 0;\n\n      const timer = setInterval(function(){\n        tries++;\n\n        const ok = bootFilterOnly();\n\n        if (ok || tries > 60) {\n          clearInterval(timer);\n        }\n      }, 200);\n    }\n\n    document.addEventListener(\'DOMContentLoaded\', start);\n    window.addEventListener(\'load\', start);\n	  window.addEventListener(\'ltPeopleFilesFiltered\', function(){\n  setTimeout(renderFinderRows, 30);\n  setTimeout(renderFinderRows, 120);\n});\n\n    setTimeout(start, 300);\n    setTimeout(start, 1000);\n    setTimeout(start, 2000);\n\n    let lastPath = location.pathname;\n\n    setInterval(function(){\n      if (location.pathname !== lastPath) {\n        lastPath = location.pathname;\n\n        if (location.pathname.includes(\'library\')) {\n          start();\n        }\n      }\n    }, 800);\n\n  })();\n		   \n		  document.addEventListener(\'click\', function(e){\n  const listBtn = e.target.closest(\'.mp-list-play-btn\');\n  if (!listBtn) return;\n\n  e.preventDefault();\n  e.stopPropagation();\n\n  const url =\n    listBtn.dataset.videoUrl ||\n    listBtn.closest(\'.mp-file-card\')?.dataset.url;\n\n  if (!url) {\n    alert(\'找不到影片網址\');\n    return;\n  }\n\n  const realPlayBtn = document.createElement(\'button\');\n  realPlayBtn.className = \'mp-play-btn\';\n  realPlayBtn.dataset.videoUrl = url;\n\n  document.body.appendChild(realPlayBtn);\n  realPlayBtn.click();\n  realPlayBtn.remove();\n}, true);\n  </script>\n\n  <?php\n}, 9999);\n\nadd_action(\'wp_footer\', function () {\n\n  ?>\n\n  <style>\n    #ms-files-page #mpGrid.mp-view-list,\n    #ms-files-page #mpGrid.mp-view-detail{\n      display:flex !important;\n      flex-direction:column !important;\n      gap:0 !important;\n      width:100%;\n      max-width:980px;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card,\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card{\n      display:block !important;\n      width:100% !important;\n      height:28px !important;\n      min-height:28px !important;\n      max-height:28px !important;\n      padding:0 !important;\n      margin:0 !important;\n      border:0 !important;\n      border-radius:0 !important;\n      box-shadow:none !important;\n      background:#fff !important;\n      overflow:hidden !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card:nth-child(even),\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card:nth-child(even){\n      background:#f3f3f3 !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card:hover,\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card:hover{\n      background:#eaf3ff !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card.is-selected,\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card.is-selected{\n      background:#dcecff !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card::before,\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card::before{\n      content:none !important;\n      display:none !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-list .mp-file-card > :not(.mp-finder-row),\n    #ms-files-page #mpGrid.mp-view-detail .mp-file-card > :not(.mp-finder-row){\n      display:none !important;\n    }\n\n    #ms-files-page .mp-finder-row{\n      height:28px;\n      display:grid;\n      grid-template-columns:96px 24px minmax(260px, 1fr) 190px 90px 90px;\n      align-items:center;\n      gap:8px;\n      padding:0 12px;\n      box-sizing:border-box;\n      font-size:13px;\n      color:#333;\n      white-space:nowrap;\n    }\n\n    #ms-files-page #mpGrid.mp-view-detail .mp-finder-row{\n      height:24px;\n      grid-template-columns:96px 22px minmax(280px, 1fr) 190px 90px 90px;\n      font-size:12px;\n    }\n\n    #ms-files-page .mp-finder-status{\n      font-size:11px;\n      font-weight:700;\n      color:#6f747b;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n\n    #ms-files-page .mp-finder-status.completed,\n    #ms-files-page .mp-finder-status.registered{\n      color:#4e7ec9;\n    }\n\n    #ms-files-page .mp-finder-status.failed{\n      color:#d64545;\n    }\n\n    #ms-files-page .mp-finder-status.processing{\n      color:#9a6a1f;\n    }\n\n   #ms-files-page .mp-finder-row{\n  grid-template-columns:96px 46px minmax(260px, 1fr) 190px 90px 90px !important;\n}\n\n#ms-files-page .mp-finder-icon-wrap{\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n  gap:5px;\n  width:46px;\n}\n\n#ms-files-page .mp-list-play-btn{\n  width:18px;\n  height:18px;\n  border:none;\n  border-radius:50%;\n  background:#2f73d8;\n  color:#fff;\n  font-size:10px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  cursor:pointer;\n  padding:0;\n  line-height:1;\n}\n\n#ms-files-page .mp-list-play-space{\n  width:18px;\n  height:18px;\n  display:inline-block;\n}\n\n#ms-files-page .mp-finder-icon{\n  width:18px;\n  height:18px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  font-size:14px;\n  overflow:hidden;\n  border-radius:3px;\n}\n\n    #ms-files-page .mp-finder-icon img{\n      width:18px !important;\n      height:18px !important;\n      object-fit:cover !important;\n      border-radius:3px !important;\n      display:block !important;\n    }\n\n    #ms-files-page .mp-finder-name{\n      font-weight:600;\n      color:#30343a;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n\n    #ms-files-page .mp-finder-date,\n    #ms-files-page .mp-finder-size,\n    #ms-files-page .mp-finder-type{\n      color:#8a8f98;\n      overflow:hidden;\n      text-overflow:ellipsis;\n    }\n  </style>\n\n  <script>\n  (function(){\n\n    function getRoot(){\n      return document.getElementById(\'ms-files-page\');\n    }\n\n    function getGrid(){\n      const root = getRoot();\n      return root ? root.querySelector(\'#mpGrid\') : null;\n    }\n\n    function getDetailValue(card, label){\n      const rows = Array.from(card.querySelectorAll(\'.mp-detail-row\'));\n      for (const row of rows) {\n        const text = row.textContent || \'\';\n        if (text.indexOf(label) === 0) {\n          return text.replace(label, \'\').trim();\n        }\n      }\n      return \'\';\n    }\n\n    function normalizeStatus(status){\n      const s = String(status || \'\').toLowerCase();\n\n      if (s === \'completed\') return \'complete\';\n      if (s === \'registered\') return \'Registered\';\n      if (s === \'failed\') return \'Failed\';\n      if (s === \'processing\') return \'Processing\';\n      if (s === \'probed\') return \'Probed\';\n\n      return status || \'\';\n    }\n\n    function getIconHTML(card){\n      const img = card.querySelector(\'img\');\n      if (img && img.src) {\n        return \'<img src=\"\' + img.src + \'\" alt=\"\">\';\n      }\n\n      const type = String(card.dataset.type || \'\').toLowerCase();\n      const name = String(card.dataset.name || \'\').toLowerCase();\n\n      if (type === \'video\' || name.match(/\\.(mp4|mov|avi|mkv)$/)) return \'🎬\';\n      if (type === \'document\' || name.match(/\\.(pdf|doc|docx|key|ppt|pptx)$/)) return \'📄\';\n      if (name.match(/\\.(jpg|jpeg|png|webp|gif)$/)) return \'🖼️\';\n\n      return \'📄\';\n    }\n\n    function buildFinderRow(card){\n  if (!card) return;\n\n  const oldRow = card.querySelector(\'.mp-finder-row\');\n  if (oldRow) oldRow.remove();\n\n      const rawStatus = String(card.dataset.status || \'\');\n      const statusClass = rawStatus.toLowerCase();\n\n      const name =\n        card.dataset.name ||\n        getDetailValue(card, \'檔名：\') ||\n        card.querySelector(\'.mp-file-name, .mp-card-title, .mp-title\')?.textContent ||\n        \'Untitled\';\n\n      const date =\n        getDetailValue(card, \'上傳日期：\') ||\n        getDetailValue(card, \'日期：\') ||\n        card.dataset.date ||\n        \'\';\n\n      const size =\n        getDetailValue(card, \'大小：\') ||\n        card.dataset.size ||\n        \'\';\n\n      const type =\n        card.dataset.type ||\n        getDetailValue(card, \'類型：\') ||\n        \'\';\n\n      const row = document.createElement(\'div\');\n      row.className = \'mp-finder-row\';\n\n      row.innerHTML =\n        \'<div class=\"mp-finder-status \' + statusClass + \'\">\' + normalizeStatus(rawStatus) + \'</div>\' +\n       \'<div class=\"mp-finder-icon-wrap\">\' +\n\n  (\n    String(card.dataset.type || \'\').toLowerCase() === \'video\'\n    ? \'<button class=\"mp-list-play-btn\" type=\"button\" data-video-url=\"\' + (card.dataset.url || \'\') + \'\">▶</button>\'\n    : \'<span class=\"mp-list-play-space\"></span>\'\n  ) +\n\n  \'<div class=\"mp-finder-icon\">\' + getIconHTML(card) + \'</div>\' +\n\n\'</div>\' +\n        \'<div class=\"mp-finder-name\">\' + name + \'</div>\' +\n        \'<div class=\"mp-finder-date\">\' + date + \'</div>\' +\n        \'<div class=\"mp-finder-size\">\' + size + \'</div>\' +\n        \'<div class=\"mp-finder-type\">\' + type + \'</div>\';\n\n      card.appendChild(row);\n    }\n\n    function renderFinderRows(){\n      const grid = getGrid();\n      if (!grid) return;\n\n      const isList =\n        grid.classList.contains(\'mp-view-list\') ||\n        grid.classList.contains(\'mp-view-detail\');\n\n      if (!isList) return;\n\n      Array.from(grid.querySelectorAll(\'.mp-file-card\')).forEach(buildFinderRow);\n    }\n\n    function start(){\n      renderFinderRows();\n\n      const root = getRoot();\n      const grid = getGrid();\n\n      if (!root || !grid || root.dataset.finderPatchReady === \'1\') return;\n\n      root.dataset.finderPatchReady = \'1\';\n\n     root.addEventListener(\'click\', function(e){\n\n  if (e.target.closest(\'.mp-list-play-btn\')) {\n    return;\n  }\n        setTimeout(renderFinderRows, 50);\n        setTimeout(renderFinderRows, 200);\n      });\n\n      const observer = new MutationObserver(function(){\n        setTimeout(renderFinderRows, 50);\n      });\n\n     observer.observe(grid, {\n  childList:true\n});\n\n\n     \n    }\n\n    document.addEventListener(\'DOMContentLoaded\', start);\n    window.addEventListener(\'load\', start);\n    setTimeout(start, 300);\n    setTimeout(start, 1000);\n    setTimeout(start, 2000);\nfunction ltRebootCollectionListView(){\n  setTimeout(function(){\n    start();\n    window.dispatchEvent(new CustomEvent(\'ltPeopleFilesFiltered\'));\n  }, 300);\n\n  setTimeout(function(){\n    start();\n    window.dispatchEvent(new CustomEvent(\'ltPeopleFilesFiltered\'));\n  }, 900);\n}\n\ndocument.addEventListener(\'click\', function(e){\n  const txt = (e.target.closest(\'a,button,.ms-nav-item,.lt-sidebar-item,.sidebar-item\')?.textContent || \'\').trim();\n\n  if (txt.includes(\'Collection\')) {\n    ltRebootCollectionListView();\n  }\n});\n\nwindow.addEventListener(\'pageshow\', ltRebootCollectionListView);\n  })();\n		   \n		   \n  </script>\n\n  <?php\n}, 10000);\nadd_action(\'wp_footer\', function () {\n\n  ?>\n\n  <style>\n    /* 中間按鈕：圖文詳細視圖，不要套 Finder 列表 */\n    #ms-files-page #mpGrid.mp-view-archive{\n      display:flex !important;\n      flex-direction:column !important;\n      gap:26px !important;\n      width:100%;\n      max-width:980px;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-file-card{\n      width:100% !important;\n      min-height:140px !important;\n      height:auto !important;\n      display:grid !important;\n      grid-template-columns:180px minmax(0, 1fr) !important;\n      gap:22px !important;\n      padding:0 !important;\n      border:0 !important;\n      border-radius:0 !important;\n      box-shadow:none !important;\n      background:transparent !important;\n      overflow:visible !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-file-card > :not(.mp-finder-row){\n      display:initial !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-finder-row{\n      display:none !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-file-card::before{\n      content:none !important;\n      display:none !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-thumb,\n    #ms-files-page #mpGrid.mp-view-archive .mp-file-thumb,\n    #ms-files-page #mpGrid.mp-view-archive .mp-card-thumb,\n    #ms-files-page #mpGrid.mp-view-archive .mp-preview{\n      width:180px !important;\n      height:120px !important;\n      border-radius:0 !important;\n      object-fit:cover !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive img,\n    #ms-files-page #mpGrid.mp-view-archive video{\n      width:180px !important;\n      height:120px !important;\n      object-fit:cover !important;\n      border-radius:0 !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-file-name,\n    #ms-files-page #mpGrid.mp-view-archive .mp-card-title,\n    #ms-files-page #mpGrid.mp-view-archive .mp-title{\n      font-size:24px !important;\n      line-height:1.2 !important;\n      font-weight:800 !important;\n      color:#4f66ff !important;\n      margin:0 0 8px !important;\n      white-space:normal !important;\n      overflow:visible !important;\n      text-overflow:clip !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-detail-row{\n      display:block !important;\n      height:auto !important;\n      line-height:1.35 !important;\n      font-size:16px !important;\n      color:#2f3338 !important;\n      margin:2px 0 !important;\n      white-space:normal !important;\n      overflow:visible !important;\n    }\n\n    #ms-files-page #mpGrid.mp-view-archive .mp-detail-row::first-letter{\n      font-weight:700;\n    }\n		   /* 去掉視圖按鈕下面的線，並讓排序功能往上 */\n#ms-files-page .mp-view-switcher{\n  border-bottom:0 !important;\n  padding-bottom:6px !important;\n  margin-bottom:0 !important;\n}\n\n#ms-files-page .mp-filter-title:first-of-type{\n  margin-top:4px !important;\n}\n	/* 九宮格 / 中間圖文詳細：隱藏 Finder row */\n#ms-files-page #mpGrid.mp-view-grid .mp-finder-row,\n#ms-files-page #mpGrid.mp-view-archive .mp-finder-row{\n  display:none !important;\n}\n\n/* 右邊列表：只顯示 Finder row */\n#ms-files-page #mpGrid.mp-view-list .mp-file-card > :not(.mp-finder-row){\n  display:none !important;\n}\n\n#ms-files-page #mpGrid.mp-view-list .mp-finder-row{\n  display:grid !important;\n  visibility:visible !important;\n  opacity:1 !important;\n}	   \n  \n		   /* 篩選後：列表 / 圖文詳細 / 詳細列表都要尊重 display:none */\n#ms-files-page #mpGrid.mp-view-list .mp-file-card[style*=\"display: none\"],\n#ms-files-page #mpGrid.mp-view-detail .mp-file-card[style*=\"display: none\"],\n#ms-files-page #mpGrid.mp-view-archive .mp-file-card[style*=\"display: none\"]{\n  display:none !important;\n}\n</style>\n\n  <?php\n}, 10001);\n\n','','global',0,10,1,'2026-05-28 13:31:12',1,NULL),
(59,'API console','','/**\n * Momentry API Debug Console v8\n * Shortcode: [momentry_api_dashboard_v8]\n */\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/api-test-v8\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_test_proxy_v8\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/api-log-v8\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_log_v8\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n});\n\nfunction momentry_log_dir_v8() {\n  $upload = wp_upload_dir();\n  $dir = trailingslashit($upload[\'basedir\']) . \'momentry-api-logs\';\n\n  if (!file_exists($dir)) {\n    wp_mkdir_p($dir);\n  }\n\n  return $dir;\n}\n\nfunction momentry_safe_log_name_v8($name) {\n  $name = sanitize_file_name($name ?: \'momentry-api-debug\');\n  $name = preg_replace(\'/\\.log$/\', \'\', $name);\n  return $name . \'.log\';\n}\n\nfunction momentry_write_log_v8($log_name, $line) {\n  $file = trailingslashit(momentry_log_dir_v8()) . momentry_safe_log_name_v8($log_name);\n  file_put_contents($file, $line . \"\\n\", FILE_APPEND);\n  return $file;\n}\n\nfunction momentry_trace_id_v8() {\n  return \'trc_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\n\nfunction momentry_log_level_v8($http_code) {\n  if ($http_code >= 500) return \'ERROR\';\n  if ($http_code >= 400) return \'WARN\';\n  return \'INFO\';\n}\n\nfunction momentry_api_log_v8(WP_REST_Request $request) {\n  $action = sanitize_text_field($request->get_param(\'action\'));\n  $log_name = momentry_safe_log_name_v8($request->get_param(\'log_name\'));\n  $file = trailingslashit(momentry_log_dir_v8()) . $log_name;\n\n  if ($action === \'view\') {\n    return [\n      \'ok\' => true,\n      \'log_name\' => $log_name,\n      \'content\' => file_exists($file) ? file_get_contents($file) : \'\'\n    ];\n  }\n\n  if ($action === \'clear\') {\n    file_put_contents($file, \'\');\n    return [\n      \'ok\' => true,\n      \'message\' => \'Log cleared\',\n      \'log_name\' => $log_name\n    ];\n  }\n\n  return new WP_REST_Response([\n    \'ok\' => false,\n    \'message\' => \'Invalid log action\'\n  ], 400);\n}\n\nfunction momentry_api_test_proxy_v8(WP_REST_Request $request) {\n\n  $base = \'http://192.168.110.201:3002\';\n\n  // TODO: 建議之後移到 wp-config.php，不要長期寫死在頁面 snippet\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $method = strtoupper(sanitize_text_field($request->get_param(\'method\')));\n  $path = $request->get_param(\'path\');\n  $body = $request->get_param(\'body\');\n  $log_name = $request->get_param(\'log_name\') ?: \'momentry-api-debug\';\n\n  if (!$method) $method = \'GET\';\n\n  if (!$path || strpos($path, \'/\') !== 0) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Path must start with /\'\n    ], 400);\n  }\n\n  $url = rtrim($base, \'/\') . $path;\n\n  $headers = [\n    \'X-API-Key\' => $api_key,\n    \'Accept\' => \'application/json\',\n    \'User-Agent\' => \'Momentry-DebugConsole/8.0\'\n  ];\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => $headers,\n  ];\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = wp_json_encode($body ?: []);\n  }\n\n  $timestamp = gmdate(\'Y-m-d\\TH:i:s.v\\Z\');\n  $trace_id = momentry_trace_id_v8();\n\n  $start = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($response)) {\n    $error_message = $response->get_error_message();\n\n    $log_block =\n\"================================================================================\n[$timestamp] [ERROR] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n\" . wp_json_encode($body ?: new stdClass(), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . \"\n\nCURL\n--------------------------------------------------------------------------------\ncurl -X $method \\\"$url\\\" \\\\\n-H \\\"X-API-Key: ********\\\" \\\\\n-H \\\"Accept: application/json\\\"\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : NA\nLatency     : {$latency_ms}ms\n\nERROR\n--------------------------------------------------------------------------------\n$error_message\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : FAIL\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n    momentry_write_log_v8($log_name, $log_block);\n\n    return [\n      \'ok\' => false,\n      \'trace_id\' => $trace_id,\n      \'timestamp\' => $timestamp,\n      \'url\' => $url,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'latency_ms\' => $latency_ms,\n      \'message\' => $error_message\n    ];\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n  $ok = $http_code >= 200 && $http_code < 300;\n  $level = momentry_log_level_v8($http_code);\n\n  $pretty_request = wp_json_encode(\n    $body ?: new stdClass(),\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $pretty_response = wp_json_encode(\n    $json ?? $body_raw,\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $curl_command = \"curl -X $method \\\"$url\\\" \\\\\\n-H \\\"X-API-Key: ********\\\" \\\\\\n-H \\\"Accept: application/json\\\"\";\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/json\\\" \\\\\\n-d \'\" . $pretty_request . \"\'\";\n  }\n\n  $summary = $ok ? \'PASS\' : \'FAIL\';\n\n  $log_block =\n\"================================================================================\n[$timestamp] [$level] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v8\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : $http_code\nLatency     : {$latency_ms}ms\nContent-Type: $content_type\n\nRAW RESPONSE\n--------------------------------------------------------------------------------\n$pretty_response\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : $summary\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n  momentry_write_log_v8($log_name, $log_block);\n\n  return [\n    \'ok\' => $ok,\n    \'trace_id\' => $trace_id,\n    \'timestamp\' => $timestamp,\n    \'url\' => $url,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'content_type\' => $content_type,\n    \'request_body\' => $body ?: new stdClass(),\n    \'data\' => $json ?? $body_raw\n  ];\n}\n\nadd_shortcode(\'momentry_api_dashboard_v8\', function () {\n\nob_start();\n?>\n\n<div id=\"momentry-debug-v8\">\n\n  <h2>Momentry API Debug Console v8</h2>\n\n  <div class=\"log-panel\">\n    <label>Current Log File</label>\n    <div class=\"log-row\">\n      <input id=\"logName\" readonly />\n      <button id=\"renewLogBtn\" type=\"button\">Renew Log File</button>\n    </div>\n  </div>\n\n  <div class=\"api-buttons\">\n    <button data-template=\"health\">Health</button>\n    <button data-template=\"health_detailed\">Health Detailed</button>\n    <button data-template=\"stats_inference\">Inference</button>\n    <button data-template=\"scan\">Scan</button>\n    <button data-template=\"register\">Register</button>\n    <button data-template=\"probe\">Probe</button>\n    <button data-template=\"process\">Process</button>\n    <button data-template=\"progress\">Progress</button>\n    <button data-template=\"unregister\">Unregister</button>\n    <button data-template=\"identity_text\">Identity Text</button>\n    <button data-template=\"identities_search\">Identities Search</button>\n    <button data-template=\"search_universal\">Universal Search</button>\n    <button data-template=\"search_smart\">Smart Search</button>\n    <button data-template=\"video_clip\">Video Clip</button>\n  </div>\n\n  <div class=\"editor\">\n    <label>Method</label>\n    <select id=\"method\">\n      <option>GET</option>\n      <option>POST</option>\n      <option>PUT</option>\n      <option>PATCH</option>\n      <option>DELETE</option>\n      <option>HEAD</option>\n    </select>\n\n    <label>Path</label>\n    <textarea id=\"path\"></textarea>\n\n    <label>Body JSON</label>\n    <textarea id=\"body\">{}</textarea>\n\n    <label>curl command</label>\n    <textarea id=\"curlPreview\"></textarea>\n\n    <div class=\"action-row\">\n      <button id=\"runBtn\">Run API</button>\n      <button id=\"copyCurlBtn\">Copy curl</button>\n      <button id=\"copyResponseBtn\">Copy Response</button>\n      <button id=\"viewLogBtn\">View Log</button>\n      <button id=\"downloadLogBtn\">Download Log</button>\n      <button id=\"clearLogBtn\">Clear Log</button>\n    </div>\n  </div>\n\n  <h3>Response / Log</h3>\n  <pre id=\"resultBox\">Ready.</pre>\n\n</div>\n\n<style>\n#momentry-debug-v8{\n  max-width:1080px;\n  margin:40px auto;\n  padding:28px;\n  color:#e2e8f0;\n  background:#0f172a;\n  border-radius:24px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n}\n#momentry-debug-v8 h2,\n#momentry-debug-v8 h3,\n#momentry-debug-v8 label{\n  color:#fff;\n}\n#momentry-debug-v8 label{\n  font-weight:700;\n}\n.log-panel{\n  margin-bottom:20px;\n}\n.log-row{\n  display:flex;\n  gap:10px;\n  margin-top:8px;\n}\n#logName{\n  flex:1;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n  box-sizing:border-box;\n}\n.api-buttons{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-bottom:24px;\n}\n.api-buttons button,\n.action-row button,\n#renewLogBtn{\n  border:0;\n  background:#2563eb;\n  color:white;\n  padding:10px 16px;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:700;\n}\n#renewLogBtn{\n  background:#0ea5e9;\n}\n.api-buttons button:hover,\n.action-row button:hover,\n#renewLogBtn:hover{\n  background:#3b82f6;\n}\n.editor{\n  display:grid;\n  grid-template-columns:160px 1fr;\n  gap:14px;\n  align-items:start;\n}\n.editor label{\n  padding-top:12px;\n}\n.editor textarea,\n.editor select{\n  background:#020617;\n  border:1px solid #334155;\n  color:#e2e8f0;\n  border-radius:14px;\n  padding:12px;\n  width:100%;\n  box-sizing:border-box;\n}\n#path{min-height:46px;}\n#body,#curlPreview{min-height:140px;}\n.action-row{\n  grid-column:2;\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-top:8px;\n}\n#resultBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5f5;\n  border-radius:16px;\n  padding:18px;\n  white-space:pre-wrap;\n  overflow:auto;\n  max-height:560px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  line-height:1.5;\n}\n</style>\n\n<script>\nconst templates = {\n  health:{method:\"GET\",path:\"/health\",body:{}},\n  health_detailed:{method:\"GET\",path:\"/health/detailed\",body:{}},\n  stats_inference:{method:\"GET\",path:\"/api/v1/stats/inference\",body:{}},\n  scan:{method:\"GET\",path:\"/api/v1/files/scan\",body:{}},\n  register:{method:\"POST\",path:\"/api/v1/files/register\",body:{file_path:\"/Users/accusys/momentry/var/sftpgo/data/demo/view7.mp4\"}},\n  probe:{method:\"GET\",path:\"/api/v1/file/9856d7f161999a1c71539caa48ef7719/probe\",body:{}},\n  process:{\n  method:\"POST\",\n  path:\"/api/v1/file/810f1a445a9eeb3412b25dff43df0ff0/process\",\n  body:{\n    file_uuid:\"810f1a445a9eeb3412b25dff43df0ff0\",\n    processors:[\n      \"cut\",\n      \"asr\",\n      \"asrx\",\n      \"yolo\",\n      \"ocr\",\n      \"face\",\n      \"pose\",\n      \"visual_chunk\",\n      \"story\",\n      \"5w1h\"\n    ]\n  }\n},\n  progress:{method:\"GET\",path:\"/api/v1/progress/9856d7f161999a1c71539caa48ef7719\",body:{}},\n  unregister:{method:\"POST\",path:\"/api/v1/unregister\",body:{file_uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  identity_text:{method:\"GET\",path:\"/api/v1/search/identity_text?q=Cary&uuid=9856d7f161999a1c71539caa48ef7719\",body:{}},\n  identities_search:{method:\"GET\",path:\"/api/v1/identities/search?q=Cary\",body:{}},\n  search_universal:{method:\"POST\",path:\"/api/v1/search/universal\",body:{query:\"charles\",limit:10,uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  search_smart:{method:\"POST\",path:\"/api/v1/search/smart\",body:{query:\"charles\",limit:5,uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  video_clip:{method:\"GET\",path:\"/api/v1/file/9856d7f161999a1c71539caa48ef7719/video?start_time=1&end_time=4\",body:{}}\n};\n\nconst methodEl = document.getElementById(\"method\");\nconst pathEl = document.getElementById(\"path\");\nconst bodyEl = document.getElementById(\"body\");\nconst curlEl = document.getElementById(\"curlPreview\");\nconst resultBox = document.getElementById(\"resultBox\");\nconst logNameEl = document.getElementById(\"logName\");\n\nfunction pad(n){ return String(n).padStart(2, \"0\"); }\n\nfunction makeLogName(){\n  const d = new Date();\n  return \"momentry-api-\" +\n    d.getFullYear() +\n    pad(d.getMonth() + 1) +\n    pad(d.getDate()) +\n    \"-\" +\n    pad(d.getHours()) +\n    pad(d.getMinutes()) +\n    pad(d.getSeconds());\n}\n\nfunction initLogName(){\n  let saved = localStorage.getItem(\"momentry_current_log_name_v8\");\n  if(!saved){\n    saved = makeLogName();\n    localStorage.setItem(\"momentry_current_log_name_v8\", saved);\n  }\n  logNameEl.value = saved;\n}\n\nfunction updateCurl(){\n  const method = methodEl.value;\n  const path = pathEl.value;\n  const body = bodyEl.value;\n\n  let curl = `curl -i -s -X ${method} \"$BASE${path}\" \\\\\\n-H \"$KEY\"`;\n\n  if(method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/json\"`;\n  }\n\n  if(body.trim() && body.trim() !== \"{}\"){\n    curl += ` \\\\\\n-d \'${body}\'`;\n  }\n\n  curlEl.value = curl;\n}\n\ninitLogName();\n\ndocument.querySelectorAll(\"[data-template]\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    const t = templates[btn.dataset.template];\n    methodEl.value = t.method;\n    pathEl.value = t.path;\n    bodyEl.value = JSON.stringify(t.body,null,2);\n    updateCurl();\n  });\n});\n\nmethodEl.addEventListener(\"change\", updateCurl);\npathEl.addEventListener(\"input\", updateCurl);\nbodyEl.addEventListener(\"input\", updateCurl);\n\ndocument.getElementById(\"renewLogBtn\").addEventListener(\"click\", ()=>{\n  const next = makeLogName();\n  localStorage.setItem(\"momentry_current_log_name_v8\", next);\n  logNameEl.value = next;\n  resultBox.textContent = \"New log file created: \" + next + \".log\";\n});\n\ndocument.getElementById(\"copyCurlBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(curlEl.value);\n  alert(\"curl copied\");\n});\n\ndocument.getElementById(\"copyResponseBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(resultBox.textContent);\n  alert(\"response copied\");\n});\n\ndocument.getElementById(\"runBtn\").addEventListener(\"click\", async()=>{\n  resultBox.textContent = \"Running...\";\n\n  try{\n    const parsedBody = JSON.parse(bodyEl.value || \"{}\");\n\n    const res = await fetch(\"/wp-json/momentry/v1/api-test-v8\",{\n      method:\"POST\",\n      headers:{\"Content-Type\":\"application/json\"},\n      body:JSON.stringify({\n        method:methodEl.value,\n        path:pathEl.value,\n        body:parsedBody,\n        log_name:logNameEl.value\n      })\n    });\n\n    const data = await res.json();\n    resultBox.textContent = JSON.stringify(data,null,2);\n  }catch(err){\n    resultBox.textContent = \"Error: \" + err.message;\n  }\n});\n\nasync function logAction(action){\n  const res = await fetch(\"/wp-json/momentry/v1/api-log-v8\",{\n    method:\"POST\",\n    headers:{\"Content-Type\":\"application/json\"},\n    body:JSON.stringify({\n      action,\n      log_name:logNameEl.value\n    })\n  });\n\n  return await res.json();\n}\n\ndocument.getElementById(\"viewLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  resultBox.textContent = data.content || \"(empty log)\";\n});\n\ndocument.getElementById(\"clearLogBtn\").addEventListener(\"click\", async()=>{\n  if(!confirm(\"Clear current log file?\")) return;\n  const data = await logAction(\"clear\");\n  resultBox.textContent = JSON.stringify(data,null,2);\n});\n\ndocument.getElementById(\"downloadLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  const blob = new Blob([data.content || \"\"], {type:\"text/plain\"});\n  const url = URL.createObjectURL(blob);\n\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = logNameEl.value + \".log\";\n  a.click();\n\n  URL.revokeObjectURL(url);\n});\n</script>\n\n<?php\nreturn ob_get_clean();\n});','','global',0,10,-1,'2026-05-20 11:47:52',1,NULL),
(60,'People – API Proxy','','\nfunction momentry_people_user_name() {\n  $u = wp_get_current_user();\n  if ($u && $u->exists()) return $u->user_login;\n  return \'guest\';\n}\n\nfunction momentry_people_write_log($args) {\n  global $wpdb;\n  $wpdb->insert(\n    $wpdb->prefix . \'momentry_api_logs\',\n    [\n      \'trace_id\'      => $args[\'trace_id\'] ?? (\'ppl_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false)),\n      \'user_id\'       => get_current_user_id(),\n      \'user_login\'    => momentry_people_user_name(),\n      \'page_source\'   => \'People\',\n      \'method\'        => $args[\'method\']        ?? \'\',\n      \'path\'          => $args[\'path\']          ?? \'\',\n      \'request_body\'  => $args[\'request_body\']  ?? null,\n      \'response_body\' => $args[\'response_body\'] ?? null,\n      \'http_code\'     => intval($args[\'http_code\']  ?? 0),\n      \'latency_ms\'    => intval($args[\'latency_ms\'] ?? 0),\n      \'success\'       => !empty($args[\'success\']) ? 1 : 0,\n      \'error_message\' => $args[\'error_message\'] ?? null,\n    ]\n  );\n}\n\nfunction momentry_people_proxy($method, $path, $body = null) {\n  $api_base = \'http://192.168.110.201:3002/api/v1\';\n  $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $args = [\n    \'method\'  => $method,\n    \'timeout\' => 20,\n    \'headers\' => [\n      \'X-API-Key\'    => $api_key,\n      \'Content-Type\' => \'application/json\',\n    ],\n  ];\n\n  if ($body !== null) {\n    $args[\'body\'] = wp_json_encode($body);\n  }\n\n  $start    = microtime(true);\n  $response = wp_remote_request($api_base . $path, $args);\n  $latency  = round((microtime(true) - $start) * 1000);\n  $code     = is_wp_error($response) ? 0 : wp_remote_retrieve_response_code($response);\n  $ok       = ($code >= 200 && $code < 300);\n\n  momentry_people_write_log([\n    \'method\'        => $method,\n    \'path\'          => \'People proxy → \' . $path,\n    \'request_body\'  => wp_json_encode($body, JSON_UNESCAPED_UNICODE),\n    \'response_body\' => is_wp_error($response) ? $response->get_error_message() : wp_remote_retrieve_body($response),\n    \'http_code\'     => $code,\n    \'latency_ms\'    => $latency,\n    \'success\'       => $ok,\n    \'error_message\' => $ok ? null : (is_wp_error($response) ? $response->get_error_message() : \'\'),\n  ]);\n\n  if (is_wp_error($response)) {\n    return new WP_REST_Response([\'error\' => $response->get_error_message()], 502);\n  }\n\n  $data = json_decode(wp_remote_retrieve_body($response), true);\n  return new WP_REST_Response($data ?? [], $code);\n}\n\nadd_action(\'rest_api_init\', function () {\n\n  $auth = \'__return_true\';\n\n	\n	// ── 新增：處理前端 race/id/thumbnail 的請求 ──\n  register_rest_route(\'momentry/v1\', \'/proxy/race/(?P<id>[a-zA-Z0-9\\-_]+)/thumbnail\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => \'__return_true\', // 允許所有人讀取縮圖\n    \'callback\'            => function (WP_REST_Request $req) {\n      $api_base = \'http://192.168.110.201:3002/api/v1\';\n      $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      \n      // 對接到你內部後端的真實路徑\n      $response = wp_remote_get($api_base . \'/race/\' . $req[\'id\'] . \'/thumbnail\', [\n        \'timeout\' => 15,\n        \'headers\' => [\'X-API-Key\' => $api_key],\n      ]);\n\n      if (is_wp_error($response)) { status_header(404); exit; }\n      $code = wp_remote_retrieve_response_code($response);\n      if ($code !== 200) { status_header($code); exit; }\n\n      $content_type = wp_remote_retrieve_header($response, \'content-type\') ?: \'image/jpeg\';\n      header(\'Content-Type: \' . $content_type);\n      header(\'Cache-Control: max-age=3600\');\n      echo wp_remote_retrieve_body($response);\n      exit;\n    },\n  ]);\n	\n	\n	\n  register_rest_route(\'momentry/v1\', \'/people-log\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => \'__return_true\',\n    \'callback\'            => function (WP_REST_Request $request) {\n      $body = $request->get_json_params();\n      momentry_people_write_log([\n        \'method\'        => sanitize_text_field($body[\'method\']        ?? \'GET\'),\n        \'path\'          => sanitize_text_field($body[\'path\']          ?? \'\'),\n        \'request_body\'  => wp_json_encode($body[\'request_body\']  ?? [], JSON_UNESCAPED_UNICODE),\n        \'response_body\' => wp_json_encode($body[\'response_body\'] ?? [], JSON_UNESCAPED_UNICODE),\n        \'http_code\'     => intval($body[\'http_code\']  ?? 0),\n        \'latency_ms\'    => intval($body[\'latency_ms\'] ?? 0),\n        \'success\'       => !empty($body[\'success\']),\n        \'error_message\' => sanitize_text_field($body[\'error_message\'] ?? \'\'),\n      ]);\n      return new WP_REST_Response([\'success\' => true], 200);\n    },\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)\', [\n    \'methods\'             => \'PATCH\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'PATCH\', \'/identity/\' . $req[\'id\'], $req->get_json_params());\n    },\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)\', [\n    \'methods\'             => \'DELETE\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'DELETE\', \'/identity/\' . $req[\'id\']);\n    },\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/mergeinto\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'POST\', \'/identity/\' . $req[\'id\'] . \'/mergeinto\', $req->get_json_params());\n    },\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/bind/trace\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'POST\', \'/identity/\' . $req[\'id\'] . \'/bind/trace\', $req->get_json_params());\n    },\n  ]);\n\n	// ── GET /identities ──\n	// ── 處理前端基本資料抓取 (GET) ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identities\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $page      = intval($req->get_param(\'page\') ?: 1);\n      $page_size = intval($req->get_param(\'page_size\') ?: 50);\n      return momentry_people_proxy(\'GET\', \'/identities?page=\' . $page . \'&page_size=\' . $page_size);\n    },\n  ]);\n\n  // ── GET /identity/{id}/traces ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/traces\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'GET\', \'/identity/\' . $req[\'id\'] . \'/traces\');\n    },\n  ]);\n\n  // ── GET /identity/{id}/files ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/files\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'GET\', \'/identity/\' . $req[\'id\'] . \'/files\');\n    },\n  ]);\n\n  // ── GET /identity/{id}/profile-image（GET）──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/profile-image\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $api_base = \'http://192.168.110.201:3002/api/v1\';\n      $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      $response = wp_remote_get($api_base . \'/identity/\' . $req[\'id\'] . \'/profile-image\', [\n        \'timeout\' => 15,\n        \'headers\' => [\'X-API-Key\' => $api_key],\n      ]);\n      if (is_wp_error($response)) { status_header(404); exit; }\n      $code = wp_remote_retrieve_response_code($response);\n      if ($code !== 200) { status_header($code); exit; }\n      $content_type = wp_remote_retrieve_header($response, \'content-type\') ?: \'image/jpeg\';\n      header(\'Content-Type: \' . $content_type);\n      header(\'Cache-Control: max-age=3600\');\n      echo wp_remote_retrieve_body($response);\n      exit;\n    },\n  ]);\n\n  // ── GET /file/{uuid}/trace/{traceId}/thumbnail ──\n  register_rest_route(\'momentry/v1\', \'/proxy/file/(?P<file_uuid>[a-zA-Z0-9\\-_]+)/trace/(?P<trace_id>[a-zA-Z0-9\\-_]+)/thumbnail\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $api_base = \'http://192.168.110.201:3002/api/v1\';\n      $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      $response = wp_remote_get($api_base . \'/file/\' . $req[\'file_uuid\'] . \'/trace/\' . $req[\'trace_id\'] . \'/thumbnail\', [\n        \'timeout\' => 15,\n        \'headers\' => [\'X-API-Key\' => $api_key],\n      ]);\n      if (is_wp_error($response)) { status_header(404); exit; }\n      $code = wp_remote_retrieve_response_code($response);\n      if ($code !== 200) { status_header($code); exit; }\n      $content_type = wp_remote_retrieve_header($response, \'content-type\') ?: \'image/jpeg\';\n      header(\'Content-Type: \' . $content_type);\n      header(\'Cache-Control: max-age=3600\');\n      echo wp_remote_retrieve_body($response);\n      exit;\n    },\n  ]);\n\n  // ── GET /file/{uuid}/thumbnail ──\n  register_rest_route(\'momentry/v1\', \'/proxy/file/(?P<file_uuid>[a-zA-Z0-9\\-_]+)/thumbnail\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $api_base = \'http://192.168.110.201:3002/api/v1\';\n      $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      $response = wp_remote_get($api_base . \'/file/\' . $req[\'file_uuid\'] . \'/thumbnail\', [\n        \'timeout\' => 15,\n        \'headers\' => [\'X-API-Key\' => $api_key],\n      ]);\n      if (is_wp_error($response)) { status_header(404); exit; }\n      $code = wp_remote_retrieve_response_code($response);\n      if ($code !== 200) { status_header($code); exit; }\n      $content_type = wp_remote_retrieve_header($response, \'content-type\') ?: \'image/jpeg\';\n      header(\'Content-Type: \' . $content_type);\n      header(\'Cache-Control: max-age=3600\');\n      echo wp_remote_retrieve_body($response);\n      exit;\n    },\n  ]);\n\n  // ── GET /file/{uuid}/faces ──\n  register_rest_route(\'momentry/v1\', \'/proxy/file/(?P<file_uuid>[a-zA-Z0-9\\-_]+)/faces\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $binding   = sanitize_text_field($req->get_param(\'binding\') ?: \'\');\n      $page      = intval($req->get_param(\'page\') ?: 1);\n      $page_size = intval($req->get_param(\'page_size\') ?: 200);\n      $qs = \'?page=\' . $page . \'&page_size=\' . $page_size;\n      if ($binding) $qs .= \'&binding=\' . urlencode($binding);\n      return momentry_people_proxy(\'GET\', \'/file/\' . $req[\'file_uuid\'] . \'/faces\' . $qs);\n    },\n  ]);\n\n  // ── GET /files/scan ──\n  register_rest_route(\'momentry/v1\', \'/proxy/files/scan\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'GET\', \'/files/scan\');\n    },\n  ]);\n\n  // ── GET /file/{uuid}/video ──\n  register_rest_route(\'momentry/v1\', \'/proxy/file/(?P<file_uuid>[a-zA-Z0-9\\-_]+)/video\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $api_base  = \'http://192.168.110.201:3002/api/v1\';\n      $api_key   = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      $start     = $req->get_param(\'start_time\');\n      $end       = $req->get_param(\'end_time\');\n      $qs        = \'\';\n      if ($start !== null) $qs .= \'?start_time=\' . floatval($start);\n      if ($end   !== null) $qs .= ($qs ? \'&\' : \'?\') . \'end_time=\' . floatval($end);\n      $response = wp_remote_get($api_base . \'/file/\' . $req[\'file_uuid\'] . \'/video\' . $qs, [\n        \'timeout\' => 60,\n        \'headers\' => [\'X-API-Key\' => $api_key],\n      ]);\n      if (is_wp_error($response)) { status_header(502); exit; }\n      $code = wp_remote_retrieve_response_code($response);\n      if ($code !== 200) { status_header($code); exit; }\n      header(\'Content-Type: video/mp4\');\n      echo wp_remote_retrieve_body($response);\n      exit;\n    },\n  ]);\n	\n	// ── Merge Undo ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/merge/(?P<merge_id>[a-zA-Z0-9\\-_]+)/undo\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'POST\', \'/identity/merge/\' . $req[\'merge_id\'] . \'/undo\');\n    },\n  ]);\n\n  // ── Merge Redo ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/merge/(?P<merge_id>[a-zA-Z0-9\\-_]+)/redo\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      return momentry_people_proxy(\'POST\', \'/identity/merge/\' . $req[\'merge_id\'] . \'/redo\');\n    },\n  ]);\n\n  // ── Merge History ──\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/merge/history\', [\n    \'methods\'             => \'GET\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      $page      = intval($req->get_param(\'page\') ?: 1);\n      $page_size = intval($req->get_param(\'page_size\') ?: 20);\n      return momentry_people_proxy(\'GET\', \'/identity/merge/history?page=\' . $page . \'&page_size=\' . $page_size);\n    },\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/proxy/identity/(?P<id>[a-zA-Z0-9\\-_]+)/profile-image\', [\n    \'methods\'             => \'POST\',\n    \'permission_callback\' => $auth,\n    \'callback\'            => function (WP_REST_Request $req) {\n      if (empty($_FILES[\'image\'])) {\n        return new WP_REST_Response([\'error\' => \'No image\'], 400);\n      }\n      $api_base = \'http://192.168.110.201:3002/api/v1\';\n      $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n      $file     = $_FILES[\'image\'];\n      $boundary = wp_generate_password(20, false);\n      $body     = \"--{$boundary}\\r\\n\"\n                . \"Content-Disposition: form-data; name=\\\"image\\\"; filename=\\\"\" . basename($file[\'name\']) . \"\\\"\\r\\n\"\n                . \"Content-Type: \" . $file[\'type\'] . \"\\r\\n\\r\\n\"\n                . file_get_contents($file[\'tmp_name\']) . \"\\r\\n\"\n                . \"--{$boundary}--\\r\\n\";\n\n      $response = wp_remote_post($api_base . \'/identity/\' . $req[\'id\'] . \'/profile-image\', [\n        \'timeout\' => 30,\n        \'headers\' => [\n          \'X-API-Key\'    => $api_key,\n          \'Content-Type\' => \'multipart/form-data; boundary=\' . $boundary,\n        ],\n        \'body\' => $body,\n      ]);\n\n      if (is_wp_error($response)) {\n        return new WP_REST_Response([\'error\' => $response->get_error_message()], 502);\n      }\n      return new WP_REST_Response([], wp_remote_retrieve_response_code($response));\n    },\n  ]);\n\n});\n\nadd_action(\'wp_footer\', function () {\n  if (strpos($_SERVER[\'REQUEST_URI\'], \'people\') === false) return;\n\n  $api_base = \'http://192.168.110.201:3002/api/v1\';\n  $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n  $people_url = $api_base . \'/identities?page=1&page_size=50\';\n\n  $start    = microtime(true);\n  $response = wp_remote_get($people_url, [\n    \'timeout\' => 15,\n    \'headers\' => [\'X-API-Key\' => $api_key],\n  ]);\n  $latency  = round((microtime(true) - $start) * 1000);\n  $code     = is_wp_error($response) ? 0 : wp_remote_retrieve_response_code($response);\n  $raw_body = is_wp_error($response) ? $response->get_error_message() : wp_remote_retrieve_body($response);\n  $ok       = ($code >= 200 && $code < 300);\n\n  momentry_people_write_log([\n    \'method\'        => \'GET\',\n    \'path\'          => \'People initial load → \' . $people_url,\n    \'request_body\'  => wp_json_encode([\'page\' => 1, \'page_size\' => 50], JSON_UNESCAPED_UNICODE),\n    \'response_body\' => $raw_body,\n    \'http_code\'     => $code,\n    \'latency_ms\'    => $latency,\n    \'success\'       => $ok,\n    \'error_message\' => $ok ? null : $raw_body,\n  ]);\n\n  $first_page_json = \'[]\';\n  $total_pages     = 1;\n\n  if (!is_wp_error($response) && $code === 200) {\n    $body = json_decode($raw_body, true);\n    if (!empty($body[\'identities\']) && is_array($body[\'identities\'])) {\n      $clean = array_values(array_filter($body[\'identities\'], function ($item) {\n        $encoded = wp_json_encode($item);\n        return $encoded !== false && json_last_error() === JSON_ERROR_NONE;\n      }));\n      $first_page_json = wp_json_encode($clean) ?: \'[]\';\n    }\n    if (!empty($body[\'total_identities\']) && !empty($body[\'page_size\'])) {\n      $total_pages = ceil($body[\'total_identities\'] / $body[\'page_size\']);\n    }\n  }\n  ?>\n  <script>\n  window.MS_IDENTITIES_PAGE1 = <?php echo $first_page_json; ?>;\n  window.MS_IDENTITIES_PAGES = <?php echo intval($total_pages); ?>;\n  window.wpRestNonce = \'<?php echo wp_create_nonce(\"wp_rest\"); ?>\';\n  </script>\n  <?php\n}, 20);\n\nadd_action(\'template_redirect\', function () {\n  if (!isset($_GET[\'ms_proxy\'])) return;\n  if (!is_user_logged_in()) { status_header(403); exit; }\n\n  set_time_limit(120);\n\n  $api_base = \'http://192.168.110.201:3002/api/v1\';\n  $api_key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $type = sanitize_text_field($_GET[\'ms_proxy\']);\n\n  if ($type === \'thumbnail\') {\n    $file_uuid = sanitize_text_field($_GET[\'file_uuid\'] ?? \'\');\n    $trace_id  = sanitize_text_field($_GET[\'trace_id\']  ?? \'\');\n    if (!$file_uuid || !$trace_id) { status_header(400); exit; }\n    $path = \'/file/\' . $file_uuid . \'/trace/\' . $trace_id . \'/thumbnail\';\n\n  } elseif ($type === \'file_thumbnail\') {\n    $file_uuid = sanitize_text_field($_GET[\'file_uuid\'] ?? \'\');\n    if (!$file_uuid) { status_header(400); exit; }\n    $path = \'/file/\' . $file_uuid . \'/thumbnail\';\n\n  } elseif ($type === \'profile_image\') {\n    $id = sanitize_text_field($_GET[\'id\'] ?? \'\');\n    if (!$id) { status_header(400); exit; }\n    $path = \'/identity/\' . $id . \'/profile-image\';\n\n  } elseif ($type === \'video\') {\n    $file_uuid  = sanitize_text_field($_GET[\'file_uuid\'] ?? \'\');\n    $start_time = $_GET[\'start_time\'] ?? null;\n    $end_time   = $_GET[\'end_time\']   ?? null;\n    if (!$file_uuid) { status_header(400); exit; }\n    $qs = \'\';\n    if ($start_time !== null) $qs .= \'?start_time=\' . floatval($start_time);\n    if ($end_time   !== null) $qs .= ($qs ? \'&\' : \'?\') . \'end_time=\' . floatval($end_time);\n    $path = \'/file/\' . $file_uuid . \'/video\' . $qs;\n\n  } else {\n    status_header(400); exit;\n  }\n\n  if ($type === \'video\') {\n    $ch = curl_init($api_base . $path);\n    curl_setopt_array($ch, [\n      CURLOPT_HTTPHEADER     => [\'X-API-Key: \' . $api_key],\n      CURLOPT_TIMEOUT        => 120,\n      CURLOPT_FOLLOWLOCATION => true,\n      CURLOPT_HEADERFUNCTION => function ($curl, $header) {\n        $lower = strtolower(trim($header));\n        if (str_starts_with($lower, \'content-type:\')) header($header, true);\n        return strlen($header);\n      },\n      CURLOPT_WRITEFUNCTION  => function ($curl, $data) {\n        echo $data;\n        if (ob_get_level()) ob_flush();\n        flush();\n        return strlen($data);\n      },\n    ]);\n    header(\'Cache-Control: no-store\');\n    header(\'Access-Control-Allow-Origin: *\');\n    $ok   = curl_exec($ch);\n    $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n    curl_close($ch);\n    if (!$ok || $code !== 200) status_header($code ?: 502);\n    exit;\n  }\n\n  $response = wp_remote_get($api_base . $path, [\n    \'timeout\' => 60,\n    \'headers\' => [\'X-API-Key\' => $api_key],\n  ]);\n\n  if (is_wp_error($response)) { status_header(502); exit; }\n  $code = wp_remote_retrieve_response_code($response);\n  if ($code !== 200) { status_header($code); exit; }\n\n  $content_type = wp_remote_retrieve_header($response, \'content-type\') ?: \'image/jpeg\';\n  header(\'Content-Type: \' . $content_type);\n  header(\'Cache-Control: public, max-age=3600\');\n  header(\'Access-Control-Allow-Origin: *\');\n  echo wp_remote_retrieve_body($response);\n  exit;\n\n}, 1);','','global',0,10,1,'2026-05-29 09:54:45',1,NULL),
(61,'LT - API - 檔案管理','','add_action(\'rest_api_init\', function () {\n    register_rest_route(\'momentry/v1\', \'/media\', [\n        \'methods\' => \'GET\',\n        \'permission_callback\' => \'__return_true\',\n        \'callback\' => function (WP_REST_Request $request) {\n\n            $base = \'http://192.168.110.201:3002\';\n            $key  = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n            $uuid       = sanitize_text_field($request->get_param(\'uuid\'));\n            $type       = sanitize_text_field($request->get_param(\'type\'));\n            $start_time = $request->get_param(\'start_time\');\n            $end_time   = $request->get_param(\'end_time\');\n            $frame      = $request->get_param(\'frame\');\n            $mode       = sanitize_text_field($request->get_param(\'mode\')) ?: \'normal\';\n            $audio      = sanitize_text_field($request->get_param(\'audio\')) ?: \'on\';\n\n            if (!$uuid || !in_array($type, [\'thumbnail\', \'video\', \'image\', \'file\'], true)) {\n                return new WP_REST_Response(\'Missing uuid or invalid type\', 400);\n            }\n\n            // 构建 API URL\n            if ($type === \'video\') {\n                $url = $base . \'/api/v1/file/\' . rawurlencode($uuid) . \'/video\';\n            } else {\n                $url = $base . \'/api/v1/file/\' . rawurlencode($uuid) . \'/\' . $type;\n            }\n\n            $query = [];\n\n            if ($start_time !== null && $start_time !== \'\') {\n                $query[\'start_time\'] = floatval($start_time);\n            }\n            if ($end_time !== null && $end_time !== \'\') {\n                $query[\'end_time\'] = floatval($end_time);\n            }\n\n            if ($type === \'video\') {\n                $query[\'mode\']  = $mode;\n                $query[\'audio\'] = $audio;\n            }\n            if ($type === \'thumbnail\' && $frame !== null && $frame !== \'\') {\n                $query[\'frame\'] = intval($frame);\n            }\n\n            if (!empty($query)) {\n                $url .= \'?\' . http_build_query($query);\n            }\n\n            // 代理请求\n            $res = wp_remote_get($url, [\n                \'timeout\' => 60,\n                \'headers\' => [\n                    \'X-API-Key\'     => $key,\n                    \'Authorization\' => $key,\n                ],\n            ]);\n\n            if (is_wp_error($res)) {\n                return new WP_REST_Response($res->get_error_message(), 500);\n            }\n\n            $code = wp_remote_retrieve_response_code($res);\n            $body = wp_remote_retrieve_body($res);\n            $content_type = wp_remote_retrieve_header($res, \'content-type\');\n\n            if (!$content_type) {\n                $content_type = $type === \'video\' ? \'video/mp4\' : \'image/jpeg\';\n            }\n\n            status_header($code);\n            header(\'Content-Type: \' . $content_type);\n            header(\'Cache-Control: public, max-age=3600\');\n\n            echo $body;\n            exit;\n        },\n    ]);\n});','','global',0,10,1,'2026-05-29 10:11:08',1,NULL),
(62,'people-proxy','','\n/* =========================================================\n   ms-people-proxy — Snippet 3\n   REST proxy：/wp-json/ms/v1/identities\n   ========================================================= */\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'ms/v1\', \'/identities\', [\n    \'methods\'             => \'GET\',\n    \'callback\'            => \'ms_identities_proxy\',\n    \'permission_callback\' => \'__return_true\',\n  ]);\n\n});\n\nfunction ms_identities_proxy(WP_REST_Request $request) {\n\n  $page      = max(1, intval($request->get_param(\'page\') ?: 1));\n  $page_size = 100;\n  $api_url   = \'http://192.168.110.201:3002/api/v1/identities?page=\' . $page . \'&page_size=\' . $page_size;\n  $api_key   = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $response = wp_remote_get($api_url, [\n    \'timeout\' => 15,\n    \'headers\' => [\'X-API-Key\' => $api_key],\n  ]);\n\n  if (is_wp_error($response)) {\n    return new WP_Error(\'api_error\', $response->get_error_message(), [\'status\' => 500]);\n  }\n\n  $code = wp_remote_retrieve_response_code($response);\n  if ($code !== 200) {\n    return new WP_Error(\'api_error\', \'Upstream error\', [\'status\' => $code]);\n  }\n\n  $body = json_decode(wp_remote_retrieve_body($response), true);\n  return rest_ensure_response($body);\n}','','global',0,10,-1,'2026-05-20 08:33:31',1,NULL),
(63,'Momentry API Console','<p>3002 有問題時，就開啟這個</p>','/**\n * Momentry API Debug Console v9\n * Shortcode: [momentry_api_dashboard_v9]\n *\n * v9 = v8 log system + v9 API templates\n * - 保留 v8：log / renew log / view log / download log / clear log / trace_id / curl preview\n * - 新增 v9：jobs / identities / identity files / identity faces / identity chunks\n * - 新增 variables：FILE_UUID / IDENTITY_UUID / TRACE_ID / QUERY\n */\n\nif (!defined(\'ABSPATH\')) {\n  exit;\n}\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/api-test-v9\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_test_proxy_v9\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/api-log-v9\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_log_v9\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n});\n\nfunction momentry_log_dir_v9() {\n  $upload = wp_upload_dir();\n  $dir = trailingslashit($upload[\'basedir\']) . \'momentry-api-logs\';\n\n  if (!file_exists($dir)) {\n    wp_mkdir_p($dir);\n  }\n\n  return $dir;\n}\n\nfunction momentry_safe_log_name_v9($name) {\n  $name = sanitize_file_name($name ?: \'momentry-api-debug\');\n  $name = preg_replace(\'/\\.log$/\', \'\', $name);\n  return $name . \'.log\';\n}\n\nfunction momentry_write_log_v9($log_name, $line) {\n  $file = trailingslashit(momentry_log_dir_v9()) . momentry_safe_log_name_v9($log_name);\n  file_put_contents($file, $line . \"\\n\", FILE_APPEND);\n  return $file;\n}\n\nfunction momentry_trace_id_v9() {\n  return \'trc_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\n\nfunction momentry_log_level_v9($http_code) {\n  if ($http_code >= 500) return \'ERROR\';\n  if ($http_code >= 400) return \'WARN\';\n  return \'INFO\';\n}\n\nfunction momentry_api_log_v9(WP_REST_Request $request) {\n  $action = sanitize_text_field($request->get_param(\'action\'));\n  $log_name = momentry_safe_log_name_v9($request->get_param(\'log_name\'));\n  $file = trailingslashit(momentry_log_dir_v9()) . $log_name;\n\n  if ($action === \'view\') {\n    return [\n      \'ok\' => true,\n      \'log_name\' => $log_name,\n      \'content\' => file_exists($file) ? file_get_contents($file) : \'\'\n    ];\n  }\n\n  if ($action === \'clear\') {\n    file_put_contents($file, \'\');\n    return [\n      \'ok\' => true,\n      \'message\' => \'Log cleared\',\n      \'log_name\' => $log_name\n    ];\n  }\n\n  return new WP_REST_Response([\n    \'ok\' => false,\n    \'message\' => \'Invalid log action\'\n  ], 400);\n}\n\nfunction momentry_api_test_proxy_v9(WP_REST_Request $request) {\n\n  $base = \'http://192.168.110.201:3002\';\n\n  // TODO: 建議之後移到 wp-config.php，不要長期寫死在頁面 snippet\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $method = strtoupper(sanitize_text_field($request->get_param(\'method\')));\n  $path = $request->get_param(\'path\');\n  $body = $request->get_param(\'body\');\n  $log_name = $request->get_param(\'log_name\') ?: \'momentry-api-debug\';\n  $api_name = sanitize_text_field($request->get_param(\'api_name\') ?: \'Manual API\');\n  $api_group = sanitize_text_field($request->get_param(\'api_group\') ?: \'General\');\n\n  if (!$method) $method = \'GET\';\n\n  if (!$path || strpos($path, \'/\') !== 0) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Path must start with /\'\n    ], 400);\n  }\n\n  $url = rtrim($base, \'/\') . $path;\n\n  $headers = [\n    \'X-API-Key\' => $api_key,\n    \'Accept\' => \'application/json\',\n    \'User-Agent\' => \'Momentry-DebugConsole/9.0\'\n  ];\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => $headers,\n  ];\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = wp_json_encode($body ?: []);\n  }\n\n  $timestamp = gmdate(\'Y-m-d\\TH:i:s.v\\Z\');\n  $trace_id = momentry_trace_id_v9();\n\n  $start = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  $pretty_request = wp_json_encode(\n    $body ?: new stdClass(),\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $curl_command = \"curl -i -s -X $method \\\"$url\\\" \\\\\\n-H \\\"X-API-Key: ********\\\" \\\\\\n-H \\\"Accept: application/json\\\"\";\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/json\\\" \\\\\\n-d \'\" . $pretty_request . \"\'\";\n  }\n\n  if (is_wp_error($response)) {\n    $error_message = $response->get_error_message();\n\n    $log_block =\n\"================================================================================\n[$timestamp] [ERROR] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v9\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : NA\nLatency     : {$latency_ms}ms\n\nERROR\n--------------------------------------------------------------------------------\n$error_message\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : FAIL\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n    momentry_write_log_v9($log_name, $log_block);\n\n    return [\n      \'ok\' => false,\n      \'trace_id\' => $trace_id,\n      \'timestamp\' => $timestamp,\n      \'url\' => $url,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'latency_ms\' => $latency_ms,\n      \'message\' => $error_message\n    ];\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n  $ok = $http_code >= 200 && $http_code < 300;\n  $level = momentry_log_level_v9($http_code);\n\n  $pretty_response = wp_json_encode(\n    $json ?? $body_raw,\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $summary = $ok ? \'PASS\' : \'FAIL\';\n\n  $log_block =\n\"================================================================================\n[$timestamp] [$level] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v9\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : $http_code\nLatency     : {$latency_ms}ms\nContent-Type: $content_type\n\nRAW RESPONSE\n--------------------------------------------------------------------------------\n$pretty_response\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : $summary\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n  momentry_write_log_v9($log_name, $log_block);\n\n  return [\n    \'ok\' => $ok,\n    \'trace_id\' => $trace_id,\n    \'timestamp\' => $timestamp,\n    \'url\' => $url,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'content_type\' => $content_type,\n    \'request_body\' => $body ?: new stdClass(),\n    \'data\' => $json ?? $body_raw\n  ];\n}\n\nadd_shortcode(\'momentry_api_dashboard_v9\', function () {\n\nob_start();\n?>\n\n<div id=\"momentry-debug-v9\">\n\n  <div class=\"v9-header\">\n    <div>\n      <h2>Momentry API Debug Console v9</h2>\n    </div>\n    <div class=\"v9-base\">Base: http://192.168.110.201:3002</div>\n  </div>\n\n  <div class=\"log-panel\">\n    <label>Current Log File</label>\n    <div class=\"log-row\">\n      <input id=\"logName\" readonly />\n      <button id=\"renewLogBtn\" type=\"button\">Renew Log File</button>\n    </div>\n  </div>\n\n  <div class=\"vars-panel\">\n    <label>File UUID\n      <input id=\"fileUuidInput\" value=\"bd80fec92b0b6963d177a2c55bf713e2\" />\n    </label>\n    <label>Identity UUID\n      <input id=\"identityUuidInput\" value=\"2b0ddefee2a945339308b375594604d5\" />\n    </label>\n    <label>Trace ID\n      <input id=\"traceIdInput\" value=\"194\" />\n    </label>\n    <label>Query\n      <input id=\"queryInput\" value=\"Cary\" />\n    </label>\n  </div>\n\n  <div class=\"v9-layout\">\n\n    <div class=\"api-sidebar\">\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"systemApis\">System <span>⌄</span></button>\n      <div id=\"systemApis\" class=\"section-items open\">\n        <button data-template=\"health\">Health</button>\n        <button data-template=\"health_detailed\">Health Detailed</button>\n        <button data-template=\"jobs\">Jobs</button>\n        <button data-template=\"stats_inference\">Inference</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"fileApis\">Files <span>⌄</span></button>\n      <div id=\"fileApis\" class=\"section-items open\">\n        <button data-template=\"scan\">Scan</button>\n        <button data-template=\"register\">Register</button>\n        <button data-template=\"probe\">Probe</button>\n        <button data-template=\"process\">Process</button>\n        <button data-template=\"progress\">Progress</button>\n        <button data-template=\"unregister\">Unregister</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"searchApis\">Search <span>⌄</span></button>\n      <div id=\"searchApis\" class=\"section-items open\">\n        <button data-template=\"identity_text\">Identity Text</button>\n        <button data-template=\"identities_search\">Identities Search</button>\n        <button data-template=\"search_universal\">Universal Search</button>\n        <button data-template=\"search_smart\">Smart Search</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"identityApis\">Identity <span>⌄</span></button>\n      <div id=\"identityApis\" class=\"section-items open\">\n        <button data-template=\"identities\">Identities</button>\n        <button data-template=\"identity_detail\">Identity Detail</button>\n        <button data-template=\"identity_files\">Identity Files</button>\n        <button data-template=\"identity_faces\">Identity Faces</button>\n        <button data-template=\"identity_chunks\">Identity Chunks</button>\n        <button data-template=\"identity_traces\">Identity Traces</button>\n        <button data-template=\"identity_patch\">PATCH Identity</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"mediaApis\">Media <span>⌄</span></button>\n      <div id=\"mediaApis\" class=\"section-items open\">\n        <button data-template=\"video_clip\">Video Clip</button>\n        <button data-template=\"thumbnail\">Thumbnail frame=100</button>\n        <button data-template=\"video_thumbnail_auto\">Video Thumbnail Auto</button>\n        <button data-template=\"trace_thumbnail\">Trace Thumbnail</button>\n      </div>\n\n    </div>\n\n    <div class=\"editor\">\n\n      <label>Method</label>\n      <select id=\"method\">\n        <option>GET</option>\n        <option>POST</option>\n        <option>PUT</option>\n        <option>PATCH</option>\n        <option>DELETE</option>\n        <option>HEAD</option>\n      </select>\n\n      <label>Path</label>\n      <textarea id=\"path\"></textarea>\n\n      <label>Body JSON</label>\n      <textarea id=\"body\">{}</textarea>\n\n      <label>curl command</label>\n      <textarea id=\"curlPreview\"></textarea>\n\n      <div class=\"action-row\">\n        <button id=\"runBtn\">Run API</button>\n        <button id=\"copyCurlBtn\">Copy curl</button>\n        <button id=\"copyResponseBtn\">Copy Response</button>\n        <button id=\"viewLogBtn\">View Log</button>\n        <button id=\"downloadLogBtn\">Download Log</button>\n        <button id=\"clearLogBtn\">Clear Log</button>\n      </div>\n\n    </div>\n  </div>\n\n  <h3>Response / Log</h3>\n  <pre id=\"resultBox\">Ready.</pre>\n\n</div>\n\n<style>\n#momentry-debug-v9{\n  max-width:1280px;\n  margin:40px auto;\n  padding:28px;\n  color:#e2e8f0;\n  background:#0f172a;\n  border-radius:24px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n}\n#momentry-debug-v9 h2,\n#momentry-debug-v9 h3,\n#momentry-debug-v9 label{\n  color:#fff;\n}\n#momentry-debug-v9 h2{\n  margin:0;\n  font-size:28px;\n}\n#momentry-debug-v9 p{\n  margin:6px 0 0;\n  color:#94a3b8;\n}\n.v9-header{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n  gap:18px;\n  margin-bottom:22px;\n}\n.v9-base{\n  color:#cbd5e1;\n  background:#020617;\n  border:1px solid #334155;\n  padding:8px 12px;\n  border-radius:999px;\n  font-size:12px;\n}\n#momentry-debug-v9 label{\n  font-weight:700;\n}\n.log-panel{\n  margin-bottom:18px;\n}\n.log-row{\n  display:flex;\n  gap:10px;\n  margin-top:8px;\n}\n#logName,\n.vars-panel input{\n  flex:1;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n  box-sizing:border-box;\n}\n.vars-panel{\n  display:grid;\n  grid-template-columns:1fr 1fr 140px 220px;\n  gap:12px;\n  background:#111827;\n  border:1px solid #334155;\n  padding:14px;\n  border-radius:18px;\n  margin-bottom:22px;\n}\n.vars-panel label{\n  display:flex;\n  flex-direction:column;\n  gap:8px;\n  color:#cbd5e1 !important;\n  font-size:13px;\n}\n.v9-layout{\n  display:grid;\n  grid-template-columns:230px minmax(0,1fr);\n  gap:20px;\n  align-items:start;\n}\n.api-sidebar{\n  background:#020617;\n  border:1px solid #334155;\n  border-radius:18px;\n  padding:12px;\n  position:sticky;\n  top:20px;\n}\n.section-toggle{\n  width:100%;\n  background:#1e293b;\n  color:#fff;\n  border:0;\n  padding:11px 12px;\n  border-radius:12px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-weight:800;\n  cursor:pointer;\n  margin:8px 0;\n}\n.section-items{\n  display:none;\n  flex-direction:column;\n  gap:8px;\n  padding:4px 0 10px;\n}\n.section-items.open{\n  display:flex;\n}\n.section-items button,\n.action-row button,\n#renewLogBtn{\n  border:0;\n  background:#2563eb;\n  color:white;\n  padding:10px 14px;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:700;\n  text-align:left;\n}\n.section-items button{\n  background:#0f172a;\n  border:1px solid #334155;\n  border-radius:12px;\n  color:#cbd5e1;\n}\n.section-items button:hover{\n  background:#1e293b;\n  color:#fff;\n}\n#renewLogBtn{\n  background:#0ea5e9;\n}\n.action-row button:hover,\n#renewLogBtn:hover{\n  background:#3b82f6;\n}\n.editor{\n  display:grid;\n  grid-template-columns:140px 1fr;\n  gap:14px;\n  align-items:start;\n}\n.editor label{\n  padding-top:12px;\n}\n.editor textarea,\n.editor select{\n  background:#020617;\n  border:1px solid #334155;\n  color:#e2e8f0;\n  border-radius:14px;\n  padding:12px;\n  width:100%;\n  box-sizing:border-box;\n}\n#path{min-height:46px;}\n#body,#curlPreview{min-height:140px;}\n.action-row{\n  grid-column:2;\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-top:8px;\n}\n#runBtn{\n  background:#16a34a;\n}\n#resultBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5f5;\n  border-radius:16px;\n  padding:18px;\n  white-space:pre-wrap;\n  overflow:auto;\n  max-height:620px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  line-height:1.5;\n}\n@media(max-width:960px){\n  .v9-layout{grid-template-columns:1fr;}\n  .vars-panel{grid-template-columns:1fr;}\n  .editor{grid-template-columns:1fr;}\n  .action-row{grid-column:1;}\n}\n</style>\n\n<script>\nconst templates = {\n  health:{group:\"System\",name:\"Health\",method:\"GET\",path:\"/health\",body:{}},\n  health_detailed:{group:\"System\",name:\"Health Detailed\",method:\"GET\",path:\"/health/detailed\",body:{}},\n  jobs:{group:\"System\",name:\"Jobs\",method:\"GET\",path:\"/api/v1/jobs\",body:{}},\n  stats_inference:{group:\"System\",name:\"Inference\",method:\"GET\",path:\"/api/v1/stats/inference\",body:{}},\n\n  scan:{group:\"Files\",name:\"Scan\",method:\"GET\",path:\"/api/v1/files/scan\",body:{}},\n  register:{group:\"Files\",name:\"Register\",method:\"POST\",path:\"/api/v1/files/register\",body:{file_path:\"/Users/accusys/momentry/var/sftpgo/data/demo/view7.mp4\"}},\n  probe:{group:\"Files\",name:\"Probe\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/probe\",body:{}},\n  process:{\n    group:\"Files\",\n    name:\"Process\",\n    method:\"POST\",\n    path:\"/api/v1/file/{{file_uuid}}/process\",\n    body:{\n      file_uuid:\"{{file_uuid}}\",\n      processors:[\n        \"cut\",\n        \"asr\",\n        \"asrx\",\n        \"yolo\",\n        \"ocr\",\n        \"face\",\n        \"pose\",\n        \"visual_chunk\",\n        \"story\",\n        \"5w1h\"\n      ]\n    }\n  },\n  progress:{group:\"Files\",name:\"Progress\",method:\"GET\",path:\"/api/v1/progress/{{file_uuid}}\",body:{}},\n  unregister:{group:\"Files\",name:\"Unregister\",method:\"POST\",path:\"/api/v1/unregister\",body:{file_uuid:\"{{file_uuid}}\"}},\n\n  identity_text:{group:\"Search\",name:\"Identity Text\",method:\"GET\",path:\"/api/v1/search/identity_text?q={{query}}&uuid={{file_uuid}}\",body:{}},\n  identities_search:{group:\"Search\",name:\"Identities Search\",method:\"GET\",path:\"/api/v1/identities/search?q={{query}}\",body:{}},\n  search_universal:{group:\"Search\",name:\"Universal Search\",method:\"POST\",path:\"/api/v1/search/universal\",body:{query:\"charles\",file_uuid:\"{{file_uuid}}\",page:1,page_size:20}},\n  search_smart:{group:\"Search\",name:\"Smart Search\",method:\"POST\",path:\"/api/v1/search/smart\",body:{query:\"people talking about divorce and dishonesty\",file_uuid:\"{{file_uuid}}\",page:1,page_size:10}},\n\n  identities:{group:\"Identity\",name:\"Identities\",method:\"GET\",path:\"/api/v1/identities?page=1&page_size=20\",body:{}},\n  identity_detail:{group:\"Identity\",name:\"Identity Detail\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}\",body:{}},\n  identity_files:{group:\"Identity\",name:\"Identity Files\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/files\",body:{}},\n  identity_faces:{group:\"Identity\",name:\"Identity Faces\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/faces\",body:{}},\n  identity_chunks:{group:\"Identity\",name:\"Identity Chunks\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/chunks\",body:{}},\n  identity_traces:{group:\"Identity\",name:\"Identity Traces\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/traces\",body:{}},\nidentity_patch:{\n  group:\"Identity\",\n  name:\"PATCH Identity\",\n  method:\"PATCH\",\n  path:\"/api/v1/identity/{{identity_uuid}}\",\n  body:{\n    name:\"Susan_Test_PERSON_278\",\n    metadata:{\n      role:\"test role\",\n      description:\"PATCH identity API test\",\n      aliases:[\n        {\n          locale:\"en\",\n          name:\"Susan Test\"\n        },\n        {\n          locale:\"zh-TW\",\n          name:\"Susan 測試\"\n        }\n      ]\n    }\n  }\n},\n\n  video_clip:{group:\"Media\",name:\"Video Clip\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/video?start_time=1&end_time=4\",body:{}},\n  thumbnail:{group:\"Media\",name:\"Thumbnail frame=100\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/thumbnail?frame=100\",body:{}},\n  video_thumbnail_auto:{group:\"Media\",name:\"Video Thumbnail Auto\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/thumbnail\",body:{}},\n  trace_thumbnail:{group:\"Media\",name:\"Trace Thumbnail\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/trace/{{trace_id}}/thumbnail\",body:{}}\n};\n\nconst methodEl = document.getElementById(\"method\");\nconst pathEl = document.getElementById(\"path\");\nconst bodyEl = document.getElementById(\"body\");\nconst curlEl = document.getElementById(\"curlPreview\");\nconst resultBox = document.getElementById(\"resultBox\");\nconst logNameEl = document.getElementById(\"logName\");\nconst fileUuidEl = document.getElementById(\"fileUuidInput\");\nconst identityUuidEl = document.getElementById(\"identityUuidInput\");\nconst traceIdEl = document.getElementById(\"traceIdInput\");\nconst queryEl = document.getElementById(\"queryInput\");\n\nlet currentTemplateKey = \"health\";\n\nfunction pad(n){ return String(n).padStart(2, \"0\"); }\n\nfunction makeLogName(){\n  const d = new Date();\n  return \"momentry-api-\" +\n    d.getFullYear() +\n    pad(d.getMonth() + 1) +\n    pad(d.getDate()) +\n    \"-\" +\n    pad(d.getHours()) +\n    pad(d.getMinutes()) +\n    pad(d.getSeconds());\n}\n\nfunction initLogName(){\n  let saved = localStorage.getItem(\"momentry_current_log_name_v9\");\n  if(!saved){\n    saved = makeLogName();\n    localStorage.setItem(\"momentry_current_log_name_v9\", saved);\n  }\n  logNameEl.value = saved;\n}\n\nfunction replaceVars(input){\n  return String(input || \"\")\n    .replaceAll(\"{{file_uuid}}\", fileUuidEl.value.trim())\n    .replaceAll(\"{{identity_uuid}}\", identityUuidEl.value.trim())\n    .replaceAll(\"{{trace_id}}\", traceIdEl.value.trim())\n    .replaceAll(\"{{query}}\", encodeURIComponent(queryEl.value.trim()));\n}\n\nfunction deepReplace(obj){\n  if(typeof obj === \"string\") return replaceVars(obj);\n  if(Array.isArray(obj)) return obj.map(deepReplace);\n  if(obj && typeof obj === \"object\"){\n    const out = {};\n    Object.keys(obj).forEach(k => out[k] = deepReplace(obj[k]));\n    return out;\n  }\n  return obj;\n}\n\nfunction updateCurl(){\n  const method = methodEl.value;\n  const path = pathEl.value;\n  const body = bodyEl.value;\n\n  let curl = `curl -i -s -X ${method} \"$BASE${path}\" \\\\\\n-H \"$KEY\"`;\n\n  if(method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/json\"`;\n  }\n\n  if(body.trim() && body.trim() !== \"{}\" && method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-d \'${body}\'`;\n  }\n\n  curlEl.value = curl;\n}\n\nfunction setTemplate(key){\n  currentTemplateKey = key;\n  const t = templates[key];\n  if(!t) return;\n\n  methodEl.value = t.method;\n  pathEl.value = replaceVars(t.path);\n  bodyEl.value = JSON.stringify(deepReplace(t.body), null, 2);\n  updateCurl();\n}\n\ninitLogName();\nsetTemplate(\"health\");\n\ndocument.querySelectorAll(\"[data-template]\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    setTemplate(btn.dataset.template);\n  });\n});\n\ndocument.querySelectorAll(\".section-toggle\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    const target = document.getElementById(btn.dataset.target);\n    const arrow = btn.querySelector(\"span\");\n    if(!target) return;\n    target.classList.toggle(\"open\");\n    if(arrow) arrow.textContent = target.classList.contains(\"open\") ? \"⌄\" : \"›\";\n  });\n});\n\nmethodEl.addEventListener(\"change\", updateCurl);\npathEl.addEventListener(\"input\", updateCurl);\nbodyEl.addEventListener(\"input\", updateCurl);\n\n[fileUuidEl, identityUuidEl, traceIdEl, queryEl].forEach(input=>{\n  input.addEventListener(\"input\", ()=>{\n    setTemplate(currentTemplateKey);\n  });\n});\n\ndocument.getElementById(\"renewLogBtn\").addEventListener(\"click\", ()=>{\n  const next = makeLogName();\n  localStorage.setItem(\"momentry_current_log_name_v9\", next);\n  logNameEl.value = next;\n  resultBox.textContent = \"New log file created: \" + next + \".log\";\n});\n\ndocument.getElementById(\"copyCurlBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(curlEl.value);\n  alert(\"curl copied\");\n});\n\ndocument.getElementById(\"copyResponseBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(resultBox.textContent);\n  alert(\"response copied\");\n});\n\ndocument.getElementById(\"runBtn\").addEventListener(\"click\", async()=>{\n  resultBox.textContent = \"Running...\";\n\n  try{\n    const parsedBody = JSON.parse(bodyEl.value || \"{}\");\n    const t = templates[currentTemplateKey] || {group:\"General\",name:\"Manual API\"};\n\n    const res = await fetch(\"/wp-json/momentry/v1/api-test-v9\",{\n      method:\"POST\",\n      headers:{\"Content-Type\":\"application/json\"},\n      body:JSON.stringify({\n        method:methodEl.value,\n        path:pathEl.value,\n        body:parsedBody,\n        log_name:logNameEl.value,\n        api_group:t.group,\n        api_name:t.name\n      })\n    });\n\n    const data = await res.json();\n    resultBox.textContent = JSON.stringify(data,null,2);\n\n    if(data && data.data && data.data.identities && Array.isArray(data.data.identities) && data.data.identities.length > 0){\n      const first = data.data.identities[0];\n      if(first.identity_uuid){\n        identityUuidEl.value = first.identity_uuid;\n      }\n    }\n\n  }catch(err){\n    resultBox.textContent = \"Error: \" + err.message;\n  }\n});\n\nasync function logAction(action){\n  const res = await fetch(\"/wp-json/momentry/v1/api-log-v9\",{\n    method:\"POST\",\n    headers:{\"Content-Type\":\"application/json\"},\n    body:JSON.stringify({\n      action,\n      log_name:logNameEl.value\n    })\n  });\n\n  return await res.json();\n}\n\ndocument.getElementById(\"viewLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  resultBox.textContent = data.content || \"(empty log)\";\n});\n\ndocument.getElementById(\"clearLogBtn\").addEventListener(\"click\", async()=>{\n  if(!confirm(\"Clear current log file?\")) return;\n  const data = await logAction(\"clear\");\n  resultBox.textContent = JSON.stringify(data,null,2);\n});\n\ndocument.getElementById(\"downloadLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  const blob = new Blob([data.content || \"\"], {type:\"text/plain\"});\n  const url = URL.createObjectURL(blob);\n\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = logNameEl.value + \".log\";\n  a.click();\n\n  URL.revokeObjectURL(url);\n});\n</script>\n\n<?php\nreturn ob_get_clean();\n});\n','3002 有問題時，就開啟這個','global',0,10,0,'2026-05-27 02:07:22',1,NULL),
(64,'API console [CLONE]','','/**\n * Momentry API Debug Console v8\n * Shortcode: [momentry_api_dashboard_v8]\n */\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/api-test-v8\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_test_proxy_v8\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/api-log-v8\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_log_v8\',\n    \'permission_callback\' => \'__return_true\'\n  ]);\n\n});\n\nfunction momentry_log_dir_v8() {\n  $upload = wp_upload_dir();\n  $dir = trailingslashit($upload[\'basedir\']) . \'momentry-api-logs\';\n\n  if (!file_exists($dir)) {\n    wp_mkdir_p($dir);\n  }\n\n  return $dir;\n}\n\nfunction momentry_safe_log_name_v8($name) {\n  $name = sanitize_file_name($name ?: \'momentry-api-debug\');\n  $name = preg_replace(\'/\\.log$/\', \'\', $name);\n  return $name . \'.log\';\n}\n\nfunction momentry_write_log_v8($log_name, $line) {\n  $file = trailingslashit(momentry_log_dir_v8()) . momentry_safe_log_name_v8($log_name);\n  file_put_contents($file, $line . \"\\n\", FILE_APPEND);\n  return $file;\n}\n\nfunction momentry_trace_id_v8() {\n  return \'trc_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\n\nfunction momentry_log_level_v8($http_code) {\n  if ($http_code >= 500) return \'ERROR\';\n  if ($http_code >= 400) return \'WARN\';\n  return \'INFO\';\n}\n\nfunction momentry_api_log_v8(WP_REST_Request $request) {\n  $action = sanitize_text_field($request->get_param(\'action\'));\n  $log_name = momentry_safe_log_name_v8($request->get_param(\'log_name\'));\n  $file = trailingslashit(momentry_log_dir_v8()) . $log_name;\n\n  if ($action === \'view\') {\n    return [\n      \'ok\' => true,\n      \'log_name\' => $log_name,\n      \'content\' => file_exists($file) ? file_get_contents($file) : \'\'\n    ];\n  }\n\n  if ($action === \'clear\') {\n    file_put_contents($file, \'\');\n    return [\n      \'ok\' => true,\n      \'message\' => \'Log cleared\',\n      \'log_name\' => $log_name\n    ];\n  }\n\n  return new WP_REST_Response([\n    \'ok\' => false,\n    \'message\' => \'Invalid log action\'\n  ], 400);\n}\n\nfunction momentry_api_test_proxy_v8(WP_REST_Request $request) {\n\n  $base = \'http://192.168.110.201:3002\';\n\n  // TODO: 建議之後移到 wp-config.php，不要長期寫死在頁面 snippet\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $method = strtoupper(sanitize_text_field($request->get_param(\'method\')));\n  $path = $request->get_param(\'path\');\n  $body = $request->get_param(\'body\');\n  $log_name = $request->get_param(\'log_name\') ?: \'momentry-api-debug\';\n\n  if (!$method) $method = \'GET\';\n\n  if (!$path || strpos($path, \'/\') !== 0) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Path must start with /\'\n    ], 400);\n  }\n\n  $url = rtrim($base, \'/\') . $path;\n\n  $headers = [\n    \'X-API-Key\' => $api_key,\n    \'Accept\' => \'application/json\',\n    \'User-Agent\' => \'Momentry-DebugConsole/8.0\'\n  ];\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => $headers,\n  ];\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = wp_json_encode($body ?: []);\n  }\n\n  $timestamp = gmdate(\'Y-m-d\\TH:i:s.v\\Z\');\n  $trace_id = momentry_trace_id_v8();\n\n  $start = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($response)) {\n    $error_message = $response->get_error_message();\n\n    $log_block =\n\"================================================================================\n[$timestamp] [ERROR] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n\" . wp_json_encode($body ?: new stdClass(), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) . \"\n\nCURL\n--------------------------------------------------------------------------------\ncurl -X $method \\\"$url\\\" \\\\\n-H \\\"X-API-Key: ********\\\" \\\\\n-H \\\"Accept: application/json\\\"\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : NA\nLatency     : {$latency_ms}ms\n\nERROR\n--------------------------------------------------------------------------------\n$error_message\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : FAIL\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n    momentry_write_log_v8($log_name, $log_block);\n\n    return [\n      \'ok\' => false,\n      \'trace_id\' => $trace_id,\n      \'timestamp\' => $timestamp,\n      \'url\' => $url,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'latency_ms\' => $latency_ms,\n      \'message\' => $error_message\n    ];\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n  $ok = $http_code >= 200 && $http_code < 300;\n  $level = momentry_log_level_v8($http_code);\n\n  $pretty_request = wp_json_encode(\n    $body ?: new stdClass(),\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $pretty_response = wp_json_encode(\n    $json ?? $body_raw,\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $curl_command = \"curl -X $method \\\"$url\\\" \\\\\\n-H \\\"X-API-Key: ********\\\" \\\\\\n-H \\\"Accept: application/json\\\"\";\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/json\\\" \\\\\\n-d \'\" . $pretty_request . \"\'\";\n  }\n\n  $summary = $ok ? \'PASS\' : \'FAIL\';\n\n  $log_block =\n\"================================================================================\n[$timestamp] [$level] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v8\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : $http_code\nLatency     : {$latency_ms}ms\nContent-Type: $content_type\n\nRAW RESPONSE\n--------------------------------------------------------------------------------\n$pretty_response\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : $summary\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n  momentry_write_log_v8($log_name, $log_block);\n\n  return [\n    \'ok\' => $ok,\n    \'trace_id\' => $trace_id,\n    \'timestamp\' => $timestamp,\n    \'url\' => $url,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'content_type\' => $content_type,\n    \'request_body\' => $body ?: new stdClass(),\n    \'data\' => $json ?? $body_raw\n  ];\n}\n\nadd_shortcode(\'momentry_api_dashboard_v8\', function () {\n\nob_start();\n?>\n\n<div id=\"momentry-debug-v8\">\n\n  <h2>Momentry API Debug Console v8</h2>\n\n  <div class=\"log-panel\">\n    <label>Current Log File</label>\n    <div class=\"log-row\">\n      <input id=\"logName\" readonly />\n      <button id=\"renewLogBtn\" type=\"button\">Renew Log File</button>\n    </div>\n  </div>\n\n  <div class=\"api-buttons\">\n    <button data-template=\"health\">Health</button>\n    <button data-template=\"health_detailed\">Health Detailed</button>\n    <button data-template=\"stats_inference\">Inference</button>\n    <button data-template=\"scan\">Scan</button>\n    <button data-template=\"register\">Register</button>\n    <button data-template=\"probe\">Probe</button>\n    <button data-template=\"process\">Process</button>\n    <button data-template=\"progress\">Progress</button>\n    <button data-template=\"unregister\">Unregister</button>\n    <button data-template=\"identity_text\">Identity Text</button>\n    <button data-template=\"identities_search\">Identities Search</button>\n    <button data-template=\"search_universal\">Universal Search</button>\n    <button data-template=\"search_smart\">Smart Search</button>\n    <button data-template=\"video_clip\">Video Clip</button>\n  </div>\n\n  <div class=\"editor\">\n    <label>Method</label>\n    <select id=\"method\">\n      <option>GET</option>\n      <option>POST</option>\n      <option>PUT</option>\n      <option>PATCH</option>\n      <option>DELETE</option>\n      <option>HEAD</option>\n    </select>\n\n    <label>Path</label>\n    <textarea id=\"path\"></textarea>\n\n    <label>Body JSON</label>\n    <textarea id=\"body\">{}</textarea>\n\n    <label>curl command</label>\n    <textarea id=\"curlPreview\"></textarea>\n\n    <div class=\"action-row\">\n      <button id=\"runBtn\">Run API</button>\n      <button id=\"copyCurlBtn\">Copy curl</button>\n      <button id=\"copyResponseBtn\">Copy Response</button>\n      <button id=\"viewLogBtn\">View Log</button>\n      <button id=\"downloadLogBtn\">Download Log</button>\n      <button id=\"clearLogBtn\">Clear Log</button>\n    </div>\n  </div>\n\n  <h3>Response / Log</h3>\n  <pre id=\"resultBox\">Ready.</pre>\n\n</div>\n\n<style>\n#momentry-debug-v8{\n  max-width:1080px;\n  margin:40px auto;\n  padding:28px;\n  color:#e2e8f0;\n  background:#0f172a;\n  border-radius:24px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n}\n#momentry-debug-v8 h2,\n#momentry-debug-v8 h3,\n#momentry-debug-v8 label{\n  color:#fff;\n}\n#momentry-debug-v8 label{\n  font-weight:700;\n}\n.log-panel{\n  margin-bottom:20px;\n}\n.log-row{\n  display:flex;\n  gap:10px;\n  margin-top:8px;\n}\n#logName{\n  flex:1;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n  box-sizing:border-box;\n}\n.api-buttons{\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-bottom:24px;\n}\n.api-buttons button,\n.action-row button,\n#renewLogBtn{\n  border:0;\n  background:#2563eb;\n  color:white;\n  padding:10px 16px;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:700;\n}\n#renewLogBtn{\n  background:#0ea5e9;\n}\n.api-buttons button:hover,\n.action-row button:hover,\n#renewLogBtn:hover{\n  background:#3b82f6;\n}\n.editor{\n  display:grid;\n  grid-template-columns:160px 1fr;\n  gap:14px;\n  align-items:start;\n}\n.editor label{\n  padding-top:12px;\n}\n.editor textarea,\n.editor select{\n  background:#020617;\n  border:1px solid #334155;\n  color:#e2e8f0;\n  border-radius:14px;\n  padding:12px;\n  width:100%;\n  box-sizing:border-box;\n}\n#path{min-height:46px;}\n#body,#curlPreview{min-height:140px;}\n.action-row{\n  grid-column:2;\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-top:8px;\n}\n#resultBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5f5;\n  border-radius:16px;\n  padding:18px;\n  white-space:pre-wrap;\n  overflow:auto;\n  max-height:560px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  line-height:1.5;\n}\n</style>\n\n<script>\nconst templates = {\n  health:{method:\"GET\",path:\"/health\",body:{}},\n  health_detailed:{method:\"GET\",path:\"/health/detailed\",body:{}},\n  stats_inference:{method:\"GET\",path:\"/api/v1/stats/inference\",body:{}},\n  scan:{method:\"GET\",path:\"/api/v1/files/scan\",body:{}},\n  register:{method:\"POST\",path:\"/api/v1/files/register\",body:{file_path:\"/Users/accusys/momentry/var/sftpgo/data/demo/view7.mp4\"}},\n  probe:{method:\"GET\",path:\"/api/v1/file/9856d7f161999a1c71539caa48ef7719/probe\",body:{}},\n  process:{\n  method:\"POST\",\n  path:\"/api/v1/file/810f1a445a9eeb3412b25dff43df0ff0/process\",\n  body:{\n    file_uuid:\"810f1a445a9eeb3412b25dff43df0ff0\",\n    processors:[\n      \"cut\",\n      \"asr\",\n      \"asrx\",\n      \"yolo\",\n      \"ocr\",\n      \"face\",\n      \"pose\",\n      \"visual_chunk\",\n      \"story\",\n      \"5w1h\"\n    ]\n  }\n},\n  progress:{method:\"GET\",path:\"/api/v1/progress/9856d7f161999a1c71539caa48ef7719\",body:{}},\n  unregister:{method:\"POST\",path:\"/api/v1/unregister\",body:{file_uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  identity_text:{method:\"GET\",path:\"/api/v1/search/identity_text?q=Cary&uuid=9856d7f161999a1c71539caa48ef7719\",body:{}},\n  identities_search:{method:\"GET\",path:\"/api/v1/identities/search?q=Cary\",body:{}},\n  search_universal:{method:\"POST\",path:\"/api/v1/search/universal\",body:{query:\"charles\",limit:10,uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  search_smart:{method:\"POST\",path:\"/api/v1/search/smart\",body:{query:\"charles\",limit:5,uuid:\"9856d7f161999a1c71539caa48ef7719\"}},\n  video_clip:{method:\"GET\",path:\"/api/v1/file/9856d7f161999a1c71539caa48ef7719/video?start_time=1&end_time=4\",body:{}}\n};\n\nconst methodEl = document.getElementById(\"method\");\nconst pathEl = document.getElementById(\"path\");\nconst bodyEl = document.getElementById(\"body\");\nconst curlEl = document.getElementById(\"curlPreview\");\nconst resultBox = document.getElementById(\"resultBox\");\nconst logNameEl = document.getElementById(\"logName\");\n\nfunction pad(n){ return String(n).padStart(2, \"0\"); }\n\nfunction makeLogName(){\n  const d = new Date();\n  return \"momentry-api-\" +\n    d.getFullYear() +\n    pad(d.getMonth() + 1) +\n    pad(d.getDate()) +\n    \"-\" +\n    pad(d.getHours()) +\n    pad(d.getMinutes()) +\n    pad(d.getSeconds());\n}\n\nfunction initLogName(){\n  let saved = localStorage.getItem(\"momentry_current_log_name_v8\");\n  if(!saved){\n    saved = makeLogName();\n    localStorage.setItem(\"momentry_current_log_name_v8\", saved);\n  }\n  logNameEl.value = saved;\n}\n\nfunction updateCurl(){\n  const method = methodEl.value;\n  const path = pathEl.value;\n  const body = bodyEl.value;\n\n  let curl = `curl -i -s -X ${method} \"$BASE${path}\" \\\\\\n-H \"$KEY\"`;\n\n  if(method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/json\"`;\n  }\n\n  if(body.trim() && body.trim() !== \"{}\"){\n    curl += ` \\\\\\n-d \'${body}\'`;\n  }\n\n  curlEl.value = curl;\n}\n\ninitLogName();\n\ndocument.querySelectorAll(\"[data-template]\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    const t = templates[btn.dataset.template];\n    methodEl.value = t.method;\n    pathEl.value = t.path;\n    bodyEl.value = JSON.stringify(t.body,null,2);\n    updateCurl();\n  });\n});\n\nmethodEl.addEventListener(\"change\", updateCurl);\npathEl.addEventListener(\"input\", updateCurl);\nbodyEl.addEventListener(\"input\", updateCurl);\n\ndocument.getElementById(\"renewLogBtn\").addEventListener(\"click\", ()=>{\n  const next = makeLogName();\n  localStorage.setItem(\"momentry_current_log_name_v8\", next);\n  logNameEl.value = next;\n  resultBox.textContent = \"New log file created: \" + next + \".log\";\n});\n\ndocument.getElementById(\"copyCurlBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(curlEl.value);\n  alert(\"curl copied\");\n});\n\ndocument.getElementById(\"copyResponseBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(resultBox.textContent);\n  alert(\"response copied\");\n});\n\ndocument.getElementById(\"runBtn\").addEventListener(\"click\", async()=>{\n  resultBox.textContent = \"Running...\";\n\n  try{\n    const parsedBody = JSON.parse(bodyEl.value || \"{}\");\n\n    const res = await fetch(\"/wp-json/momentry/v1/api-test-v8\",{\n      method:\"POST\",\n      headers:{\"Content-Type\":\"application/json\"},\n      body:JSON.stringify({\n        method:methodEl.value,\n        path:pathEl.value,\n        body:parsedBody,\n        log_name:logNameEl.value\n      })\n    });\n\n    const data = await res.json();\n    resultBox.textContent = JSON.stringify(data,null,2);\n  }catch(err){\n    resultBox.textContent = \"Error: \" + err.message;\n  }\n});\n\nasync function logAction(action){\n  const res = await fetch(\"/wp-json/momentry/v1/api-log-v8\",{\n    method:\"POST\",\n    headers:{\"Content-Type\":\"application/json\"},\n    body:JSON.stringify({\n      action,\n      log_name:logNameEl.value\n    })\n  });\n\n  return await res.json();\n}\n\ndocument.getElementById(\"viewLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  resultBox.textContent = data.content || \"(empty log)\";\n});\n\ndocument.getElementById(\"clearLogBtn\").addEventListener(\"click\", async()=>{\n  if(!confirm(\"Clear current log file?\")) return;\n  const data = await logAction(\"clear\");\n  resultBox.textContent = JSON.stringify(data,null,2);\n});\n\ndocument.getElementById(\"downloadLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  const blob = new Blob([data.content || \"\"], {type:\"text/plain\"});\n  const url = URL.createObjectURL(blob);\n\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = logNameEl.value + \".log\";\n  a.click();\n\n  URL.revokeObjectURL(url);\n});\n</script>\n\n<?php\nreturn ob_get_clean();\n});','','global',0,10,-1,'2026-05-21 03:15:41',1,NULL),
(65,'Raptor API Console','<p>可以把 RAPTOR API 全部在這裡快速測試</p>','/**\n * Raptor API Debug Console v1\n * Shortcode: [raptor_api_dashboard_v1]\n */\n\nif (!defined(\'ABSPATH\')) exit;\n\nif (!defined(\'RAPTOR_DEFAULT_USERNAME\')) {\n  define(\'RAPTOR_DEFAULT_USERNAME\', \'accusys_user1\');\n}\n\nif (!defined(\'RAPTOR_DEFAULT_PASSWORD\')) {\n  define(\'RAPTOR_DEFAULT_PASSWORD\', \'12345\');\n}\n\nif (!defined(\'RAPTOR_DEFAULT_REALM\')) {\n  define(\'RAPTOR_DEFAULT_REALM\', \'dhtsolution\');\n}\n\nadd_action(\'rest_api_init\', function () {\n  register_rest_route(\'raptor/v1\', \'/api-test\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_api_test_proxy_v1\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}  ]);\n\n  register_rest_route(\'raptor/v1\', \'/api-log\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_api_log_v1\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}  ]);\n});\n\nfunction raptor_log_dir_v1() {\n  $upload = wp_upload_dir();\n  $dir = trailingslashit($upload[\'basedir\']) . \'raptor-api-logs\';\n  if (!file_exists($dir)) wp_mkdir_p($dir);\n  return $dir;\n}\n\nfunction raptor_safe_log_name_v1($name) {\n  $name = sanitize_file_name($name ?: \'raptor-api-debug\');\n  $name = preg_replace(\'/\\.log$/\', \'\', $name);\n  return $name . \'.log\';\n}\n\nfunction raptor_write_log_v1($log_name, $line) {\n  $file = trailingslashit(raptor_log_dir_v1()) . raptor_safe_log_name_v1($log_name);\n  file_put_contents($file, $line . \"\\n\", FILE_APPEND);\n  return $file;\n}\n\nfunction raptor_trace_id_v1() {\n  return \'rtr_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\n\nfunction raptor_log_level_v1($http_code) {\n  if ($http_code >= 500) return \'ERROR\';\n  if ($http_code >= 400) return \'WARN\';\n  return \'INFO\';\n}\nfunction raptor_user_name_v1() {\n  $u = wp_get_current_user();\n\n  if ($u && $u->exists()) {\n    return $u->user_login;\n  }\n\n  return \'guest\';\n}\n\nfunction raptor_write_db_log_v1($args) {\n  global $wpdb;\n\n  $wpdb->insert(\n    $wpdb->prefix . \'momentry_api_logs\',\n    [\n      \'trace_id\' => $args[\'trace_id\'] ?? raptor_trace_id_v1(),\n      \'user_id\' => get_current_user_id(),\n      \'user_login\' => raptor_user_name_v1(),\n      \'page_source\' => \'Raptor API Debug Console\',\n      \'method\' => $args[\'method\'] ?? \'\',\n      \'path\' => $args[\'path\'] ?? \'\',\n      \'request_body\' => $args[\'request_body\'] ?? null,\n      \'response_body\' => $args[\'response_body\'] ?? null,\n      \'http_code\' => intval($args[\'http_code\'] ?? 0),\n      \'latency_ms\' => intval($args[\'latency_ms\'] ?? 0),\n      \'success\' => !empty($args[\'success\']) ? 1 : 0,\n      \'error_message\' => $args[\'error_message\'] ?? null\n    ]\n  );\n}\n\nfunction raptor_api_log_v1(WP_REST_Request $request) {\n  $action = sanitize_text_field($request->get_param(\'action\'));\n  $log_name = raptor_safe_log_name_v1($request->get_param(\'log_name\'));\n  $file = trailingslashit(raptor_log_dir_v1()) . $log_name;\n\n  if ($action === \'view\') {\n    return [\n      \'ok\' => true,\n      \'log_name\' => $log_name,\n      \'content\' => file_exists($file) ? file_get_contents($file) : \'\'\n    ];\n  }\n\n  if ($action === \'clear\') {\n    file_put_contents($file, \'\');\n    return [\n      \'ok\' => true,\n      \'message\' => \'Log cleared\',\n      \'log_name\' => $log_name\n    ];\n  }\n\n  return new WP_REST_Response([\n    \'ok\' => false,\n    \'message\' => \'Invalid log action\'\n  ], 400);\n}\n\nfunction raptor_is_allowed_path_v1($path) {\n  $allowed_exact = [\n    \'/\',\n    \'/health\',\n    \'/api/0.3/sso/login\',\n    \'/api/0.3/sso/logout\',\n    \'/api/0.3/search/hybrid\',\n    \'/api/0.3/search/bm25\',\n    \'/api/0.3/search/vector\',\n    \'/api/0.3/search/tkg\',\n    \'/api/0.3/search/graphrag\',\n    \'/api/0.3/search/video_search\',\n    \'/api/0.3/asset/fileupload_analysis\',\n    \'/api/0.3/asset/fileupload_analysis_batch\',\n    \'/api/0.3/asset/users/commits\',\n    \'/api/0.3/processing/cache/all\',\n    \'/api/0.3/a2a/query\',\n  ];\n\n  $allowed_prefix = [\n    \'/api/0.3/asset/filedownload/\',\n    \'/api/0.3/asset/fileversions/\',\n    \'/api/0.3/asset/filearchive/\',\n    \'/api/0.3/asset/delfile/\',\n    \'/api/0.3/asset/file-expiration/\',\n    \'/api/0.3/processing/cache/\',\n  ];\n\n  if (in_array($path, $allowed_exact, true)) return true;\n\n  foreach ($allowed_prefix as $prefix) {\n    if (strpos($path, $prefix) === 0) return true;\n  }\n\n  return false;\n}\n\nfunction raptor_api_test_proxy_v1(WP_REST_Request $request) {\n  $base = \'http://raptor_open_0_3_api.dhtsolution.com:8012\';\n\n  $method = strtoupper(sanitize_text_field($request->get_param(\'method\') ?: \'GET\'));\n  $path = $request->get_param(\'path\');\n  $body = $request->get_param(\'body\');\n  $token = sanitize_text_field($request->get_param(\'token\') ?: \'\');\n  $log_name = $request->get_param(\'log_name\') ?: \'raptor-api-debug\';\n  $api_name = sanitize_text_field($request->get_param(\'api_name\') ?: \'Manual API\');\n  $api_group = sanitize_text_field($request->get_param(\'api_group\') ?: \'General\');\n\n  if (!$path || strpos($path, \'/\') !== 0) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Path must start with /\'\n    ], 400);\n  }\n\n  if (!raptor_is_allowed_path_v1($path)) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Endpoint not allowed in Raptor Test Lab.\',\n      \'path\' => $path\n    ], 403);\n  }\n\n  $url = rtrim($base, \'/\') . $path;\n\n  $headers = [\n    \'Accept\' => \'application/json\',\n    \'User-Agent\' => \'Raptor-DebugConsole/1.0\'\n  ];\n\n  if ($token) {\n    $headers[\'Authorization\'] = \'Bearer \' . $token;\n  }\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => $headers,\n  ];\n\n  if ($path === \'/api/0.3/sso/login\') {\n  $args[\'headers\'][\'Content-Type\'] = \'application/x-www-form-urlencoded\';\n  $args[\'body\'] = [\n    \'username\' => RAPTOR_DEFAULT_USERNAME,\n    \'password\' => RAPTOR_DEFAULT_PASSWORD,\n    \'realm_name\' => RAPTOR_DEFAULT_REALM,\n  ];\n} else if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = wp_json_encode($body ?: []);\n  }\n\n  $timestamp = gmdate(\'Y-m-d\\TH:i:s.v\\Z\');\n  $trace_id = raptor_trace_id_v1();\n\n  $pretty_request = wp_json_encode(\n    $body ?: new stdClass(),\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $curl_command = \"BASE=\\\"{$base}\\\"\\nTOKEN=\\\"YOUR_TOKEN\\\"\\n\\ncurl -i -s -X {$method} \\\"\\$BASE{$path}\\\" \\\\\\n-H \\\"Accept: application/json\\\"\";\n\n  if ($token) {\n    $curl_command .= \" \\\\\\n-H \\\"Authorization: Bearer \\$TOKEN\\\"\";\n  }\n\n  if ($path === \'/api/0.3/sso/login\') {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/x-www-form-urlencoded\\\"\";\n    $curl_command .= \" \\\\\\n-d \\\"username=YOUR_USERNAME&password=YOUR_PASSWORD&realm_name=dhtsolution\\\"\";\n  } else if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/json\\\"\";\n    $curl_command .= \" \\\\\\n-d \'\" . $pretty_request . \"\'\";\n  }\n\n  $start = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($response)) {\n    $error_message = $response->get_error_message();\n\n    $log_block = \"\n================================================================================\n[$timestamp] [ERROR] [RAPTOR_API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Raptor Debug Console v1\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : NA\nLatency     : {$latency_ms}ms\n\nERROR\n--------------------------------------------------------------------------------\n$error_message\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : FAIL\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n    raptor_write_log_v1($log_name, $log_block);\n\n    return [\n      \'ok\' => false,\n      \'trace_id\' => $trace_id,\n      \'timestamp\' => $timestamp,\n      \'url\' => $url,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'latency_ms\' => $latency_ms,\n      \'curl\' => $curl_command,\n      \'message\' => $error_message\n    ];\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n  $ok = $http_code >= 200 && $http_code < 300;\n  $level = raptor_log_level_v1($http_code);\nraptor_write_db_log_v1([\n  \'trace_id\' => $trace_id,\n  \'method\' => $method,\n  \'path\' => \'Raptor API Test → \' . $url,\n  \'request_body\' => $pretty_request,\n  \'response_body\' => $body_raw,\n  \'http_code\' => $http_code,\n  \'latency_ms\' => $latency_ms,\n  \'success\' => $ok,\n  \'error_message\' => $ok ? null : $body_raw\n]);\n  $pretty_response = wp_json_encode(\n    $json ?? $body_raw,\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $summary = $ok ? \'PASS\' : \'FAIL\';\n\n  $log_block = \"\n================================================================================\n[$timestamp] [$level] [RAPTOR_API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Raptor Debug Console v1\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : $http_code\nLatency     : {$latency_ms}ms\nContent-Type: $content_type\n\nRAW RESPONSE\n--------------------------------------------------------------------------------\n$pretty_response\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : $summary\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n  raptor_write_log_v1($log_name, $log_block);\n\n  return [\n    \'ok\' => $ok,\n    \'trace_id\' => $trace_id,\n    \'timestamp\' => $timestamp,\n    \'url\' => $url,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'content_type\' => $content_type,\n    \'request_body\' => $body ?: new stdClass(),\n    \'curl\' => $curl_command,\n    \'data\' => $json ?? $body_raw\n  ];\n}\n\nadd_shortcode(\'raptor_api_dashboard_v1\', function () {\n  ob_start();\n?>\n\n<div id=\"raptor-debug-v1\">\n\n  <div class=\"v1-header\">\n    <div>\n      <h2>Raptor API Debug Console v1</h2>\n    </div>\n    <div class=\"v1-base\">Base: http://raptor_open_0_3_api.dhtsolution.com:8012</div>\n  </div>\n\n  <div class=\"log-panel\">\n    <label>Current Log File</label>\n    <div class=\"log-row\">\n      <input id=\"logName\" readonly />\n      <button id=\"renewLogBtn\" type=\"button\">Renew Log File</button>\n    </div>\n  </div>\n\n  <div class=\"vars-panel\">\n    <label>Bearer Token\n      <input id=\"tokenInput\" placeholder=\"Login 後可貼 access_token；也可手動貼上\" />\n    </label>\n    <label>Query\n      <input id=\"queryInput\" value=\"a person walking\" />\n    </label>\n    <label>Asset Path\n      <input id=\"assetPathInput\" value=\"demo\" />\n    </label>\n    <label>Filename\n      <input id=\"filenameInput\" value=\"sample.mp4\" />\n    </label>\n    <label>Version ID\n      <input id=\"versionIdInput\" value=\"latest\" />\n    </label>\n    <label>Processing Key\n      <input id=\"processingKeyInput\" value=\"YOUR_CORRELATION_ID\" />\n    </label>\n  </div>\n\n  <div class=\"v1-layout\">\n\n    <div class=\"api-sidebar\">\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"systemApis\">System <span>⌄</span></button>\n      <div id=\"systemApis\" class=\"section-items open\">\n        <button data-template=\"root\">Root</button>\n        <button data-template=\"health\">Health</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"authApis\">SSO / Auth <span>⌄</span></button>\n      <div id=\"authApis\" class=\"section-items open\">\n        <button data-template=\"login\">Login</button>\n        <button data-template=\"logout\">Logout</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"searchApis\">Search <span>⌄</span></button>\n      <div id=\"searchApis\" class=\"section-items open\">\n        <button data-template=\"hybrid\">Hybrid Search</button>\n        <button data-template=\"bm25\">BM25 Search</button>\n        <button data-template=\"vector\">Vector Search</button>\n        <button data-template=\"video_search\">Video Search</button>\n        <button data-template=\"graphrag\">GraphRAG</button>\n        <button data-template=\"tkg\">TKG</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"assetApis\">Asset <span>⌄</span></button>\n      <div id=\"assetApis\" class=\"section-items open\">\n        <button data-template=\"asset_upload\">Upload Analysis</button>\n        <button data-template=\"asset_upload_batch\">Upload Batch</button>\n        <button data-template=\"asset_download\">Download Asset</button>\n        <button data-template=\"asset_versions\">File Versions</button>\n        <button data-template=\"user_commits\">User Commits</button>\n      </div>\n\n      <button class=\"section-toggle danger-toggle\" type=\"button\" data-target=\"dangerApis\">Dangerous <span>⌄</span></button>\n      <div id=\"dangerApis\" class=\"section-items\">\n        <button data-template=\"asset_archive\">Archive Asset</button>\n        <button data-template=\"asset_delete\">Delete Asset</button>\n        <button data-template=\"asset_expiration\">Update Expiration</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"processingApis\">Processing <span>⌄</span></button>\n      <div id=\"processingApis\" class=\"section-items open\">\n        <button data-template=\"cache_one\">Cache One</button>\n        <button data-template=\"cache_all\">Cache All</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"agentApis\">A2A / Agent <span>⌄</span></button>\n      <div id=\"agentApis\" class=\"section-items open\">\n        <button data-template=\"a2a_direct\">A2A Direct</button>\n        <button data-template=\"a2a_agent\">A2A Agent</button>\n        <button data-template=\"a2a_tool\">A2A Tool</button>\n      </div>\n\n    </div>\n\n    <div class=\"editor\">\n\n      <label>Method</label>\n      <select id=\"method\">\n        <option>GET</option>\n        <option>POST</option>\n        <option>PUT</option>\n        <option>PATCH</option>\n        <option>DELETE</option>\n        <option>HEAD</option>\n      </select>\n\n      <label>Path</label>\n      <textarea id=\"path\"></textarea>\n\n      <label>Body JSON</label>\n      <textarea id=\"body\">{}</textarea>\n\n      <label>curl command</label>\n      <textarea id=\"curlPreview\"></textarea>\n\n      <div class=\"action-row\">\n        <button id=\"runBtn\">Run API</button>\n        <button id=\"copyCurlBtn\">Copy curl</button>\n        <button id=\"copyResponseBtn\">Copy Response</button>\n        <button id=\"viewLogBtn\">View Log</button>\n        <button id=\"downloadLogBtn\">Download Log</button>\n        <button id=\"clearLogBtn\">Clear Log</button>\n      </div>\n\n    </div>\n  </div>\n\n  <h3>Response / Log</h3>\n  <pre id=\"resultBox\">Ready.</pre>\n\n</div>\n\n<style>\n#raptor-debug-v1{\n  max-width:1280px;\n  margin:40px auto;\n  padding:28px;\n  color:#e2e8f0;\n  background:#0f172a;\n  border-radius:24px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n}\n#raptor-debug-v1 h2,\n#raptor-debug-v1 h3,\n#raptor-debug-v1 label{color:#fff;}\n#raptor-debug-v1 h2{margin:0;font-size:28px;}\n#raptor-debug-v1 p{margin:6px 0 0;color:#94a3b8;}\n.v1-header{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n  gap:18px;\n  margin-bottom:22px;\n}\n.v1-base{\n  color:#cbd5e1;\n  background:#020617;\n  border:1px solid #334155;\n  padding:8px 12px;\n  border-radius:999px;\n  font-size:12px;\n}\n.log-panel{margin-bottom:18px;}\n.log-row{display:flex;gap:10px;margin-top:8px;}\n#logName,.vars-panel input{\n  flex:1;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n  box-sizing:border-box;\n}\n.vars-panel{\n  display:grid;\n  grid-template-columns:1.4fr 1fr 1fr;\n  gap:12px;\n  background:#111827;\n  border:1px solid #334155;\n  padding:14px;\n  border-radius:18px;\n  margin-bottom:22px;\n}\n.vars-panel label{\n  display:flex;\n  flex-direction:column;\n  gap:8px;\n  color:#cbd5e1 !important;\n  font-size:13px;\n}\n.v1-layout{\n  display:grid;\n  grid-template-columns:250px minmax(0,1fr);\n  gap:20px;\n  align-items:start;\n}\n.api-sidebar{\n  background:#020617;\n  border:1px solid #334155;\n  border-radius:18px;\n  padding:12px;\n  position:sticky;\n  top:20px;\n}\n.section-toggle{\n  width:100%;\n  background:#1e293b;\n  color:#fff;\n  border:0;\n  padding:11px 12px;\n  border-radius:12px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-weight:800;\n  cursor:pointer;\n  margin:8px 0;\n}\n.danger-toggle{background:#7f1d1d;}\n.section-items{\n  display:none;\n  flex-direction:column;\n  gap:8px;\n  padding:4px 0 10px;\n}\n.section-items.open{display:flex;}\n.section-items button,\n.action-row button,\n#renewLogBtn{\n  border:0;\n  background:#2563eb;\n  color:white;\n  padding:10px 14px;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:700;\n  text-align:left;\n}\n.section-items button{\n  background:#0f172a;\n  border:1px solid #334155;\n  border-radius:12px;\n  color:#cbd5e1;\n}\n.section-items button:hover{background:#1e293b;color:#fff;}\n#renewLogBtn{background:#0ea5e9;}\n.action-row button:hover,#renewLogBtn:hover{background:#3b82f6;}\n.editor{\n  display:grid;\n  grid-template-columns:140px 1fr;\n  gap:14px;\n  align-items:start;\n}\n.editor label{padding-top:12px;}\n.editor textarea,.editor select{\n  background:#020617;\n  border:1px solid #334155;\n  color:#e2e8f0;\n  border-radius:14px;\n  padding:12px;\n  width:100%;\n  box-sizing:border-box;\n}\n#path{min-height:46px;}\n#body,#curlPreview{min-height:150px;}\n.action-row{\n  grid-column:2;\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-top:8px;\n}\n#runBtn{background:#16a34a;}\n#resultBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5f5;\n  border-radius:16px;\n  padding:18px;\n  white-space:pre-wrap;\n  overflow:auto;\n  max-height:620px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  line-height:1.5;\n}\n@media(max-width:960px){\n  .v1-layout{grid-template-columns:1fr;}\n  .vars-panel{grid-template-columns:1fr;}\n  .editor{grid-template-columns:1fr;}\n  .action-row{grid-column:1;}\n}\n</style>\n\n<script>\nconst wpRestNonce = \'<?php echo esc_js(wp_create_nonce(\'wp_rest\')); ?>\';\n\nconst templates = {\n  root:{group:\"System\",name:\"Root\",method:\"GET\",path:\"/\",body:{}},\n  health:{group:\"System\",name:\"Health\",method:\"GET\",path:\"/health\",body:{}},\nlogin:{group:\"SSO\",name:\"Login\",method:\"POST\",path:\"/api/0.3/sso/login\",body:{note:\"Credentials are injected server-side by WordPress PHP.\"}},\n  logout:{group:\"SSO\",name:\"Logout\",method:\"POST\",path:\"/api/0.3/sso/logout\",body:{}},\n\n  hybrid:{group:\"Search\",name:\"Hybrid Search\",method:\"POST\",path:\"/api/0.3/search/hybrid\",body:{query:\"{{query}}\",top_k:10,payload_schema:\"contextual\"}},\n  bm25:{group:\"Search\",name:\"BM25 Search\",method:\"POST\",path:\"/api/0.3/search/bm25\",body:{query:\"{{query}}\",top_k:10,payload_schema:\"contextual\"}},\n  vector:{group:\"Search\",name:\"Vector Search\",method:\"POST\",path:\"/api/0.3/search/vector\",body:{query:\"{{query}}\",top_k:10,payload_schema:\"contextual\"}},\n  video_search:{group:\"Video Search\",name:\"Video Search\",method:\"POST\",path:\"/api/0.3/search/video_search\",body:{query:\"{{query}}\",top_k:10,candidate_multiplier:5,score_threshold:0.52}},\n  graphrag:{group:\"Search\",name:\"GraphRAG\",method:\"POST\",path:\"/api/0.3/search/graphrag\",body:{query:\"{{query}}\",max_depth:2,limit:50,score_threshold:0.5,strategy:\"hybrid\"}},\n  tkg:{group:\"Search\",name:\"TKG\",method:\"POST\",path:\"/api/0.3/search/tkg\",body:{query:\"{{query}}\",time_start:null,time_end:null,max_depth:2,limit:50,score_threshold:0.3}},\n\n  asset_upload:{group:\"Asset\",name:\"Upload Analysis\",method:\"POST\",path:\"/api/0.3/asset/fileupload_analysis\",body:{note:\"This endpoint requires multipart/form-data. Use curl manually with -F primary_file=@/path/to/file.\"}},\n  asset_upload_batch:{group:\"Asset\",name:\"Upload Batch\",method:\"POST\",path:\"/api/0.3/asset/fileupload_analysis_batch\",body:{note:\"This endpoint requires multipart/form-data. Use curl manually with -F primary_files=@/path/to/file.\"}},\n  asset_download:{group:\"Asset\",name:\"Download Asset\",method:\"GET\",path:\"/api/0.3/asset/filedownload/{{asset_path}}/{{version_id}}?return_file_content=false\",body:{}},\n  asset_versions:{group:\"Asset\",name:\"File Versions\",method:\"GET\",path:\"/api/0.3/asset/fileversions/{{asset_path}}/{{filename}}\",body:{}},\n  user_commits:{group:\"Asset\",name:\"User Commits\",method:\"GET\",path:\"/api/0.3/asset/users/commits?page=1&page_size=10\",body:{}},\n\n  asset_archive:{group:\"Dangerous\",name:\"Archive Asset\",method:\"POST\",path:\"/api/0.3/asset/filearchive/{{asset_path}}/{{version_id}}\",body:{}},\n  asset_delete:{group:\"Dangerous\",name:\"Delete Asset\",method:\"POST\",path:\"/api/0.3/asset/delfile/{{asset_path}}/{{version_id}}\",body:{}},\n  asset_expiration:{group:\"Dangerous\",name:\"Update Expiration\",method:\"POST\",path:\"/api/0.3/asset/file-expiration/{{asset_path}}/{{version_id}}\",body:{archive_date_or_ttl:null,destroy_date_or_ttl:null}},\n\n  cache_one:{group:\"Processing\",name:\"Cache One\",method:\"GET\",path:\"/api/0.3/processing/cache/video/{{processing_key}}\",body:{}},\n  cache_all:{group:\"Processing\",name:\"Cache All\",method:\"GET\",path:\"/api/0.3/processing/cache/all\",body:{}},\n\n  a2a_direct:{group:\"A2A\",name:\"A2A Direct\",method:\"POST\",path:\"/api/0.3/a2a/query\",body:{question:\"{{query}}\",top_k:5,mode:\"direct\"}},\n  a2a_agent:{group:\"A2A\",name:\"A2A Agent\",method:\"POST\",path:\"/api/0.3/a2a/query\",body:{question:\"{{query}}\",top_k:5,mode:\"agent\"}},\n  a2a_tool:{group:\"A2A\",name:\"A2A Tool\",method:\"POST\",path:\"/api/0.3/a2a/query\",body:{question:\"{{query}}\",top_k:5,mode:\"tool\"}}\n};\n\nconst methodEl = document.getElementById(\"method\");\nconst pathEl = document.getElementById(\"path\");\nconst bodyEl = document.getElementById(\"body\");\nconst curlEl = document.getElementById(\"curlPreview\");\nconst resultBox = document.getElementById(\"resultBox\");\nconst logNameEl = document.getElementById(\"logName\");\nconst tokenEl = document.getElementById(\"tokenInput\");\nconst queryEl = document.getElementById(\"queryInput\");\nconst assetPathEl = document.getElementById(\"assetPathInput\");\nconst filenameEl = document.getElementById(\"filenameInput\");\nconst versionIdEl = document.getElementById(\"versionIdInput\");\nconst processingKeyEl = document.getElementById(\"processingKeyInput\");\n\nlet currentTemplateKey = \"health\";\n\nfunction pad(n){ return String(n).padStart(2, \"0\"); }\n\nfunction makeLogName(){\n  const d = new Date();\n  return \"raptor-api-\" +\n    d.getFullYear() +\n    pad(d.getMonth() + 1) +\n    pad(d.getDate()) +\n    \"-\" +\n    pad(d.getHours()) +\n    pad(d.getMinutes()) +\n    pad(d.getSeconds());\n}\n\nfunction initLogName(){\n  let saved = localStorage.getItem(\"raptor_current_log_name_v1\");\n  if(!saved){\n    saved = makeLogName();\n    localStorage.setItem(\"raptor_current_log_name_v1\", saved);\n  }\n  logNameEl.value = saved;\n}\n\nfunction replaceVars(input){\n  return String(input || \"\")\n    .replaceAll(\"{{query}}\", queryEl.value.trim())\n    .replaceAll(\"{{asset_path}}\", encodeURIComponent(assetPathEl.value.trim()))\n    .replaceAll(\"{{filename}}\", encodeURIComponent(filenameEl.value.trim()))\n    .replaceAll(\"{{version_id}}\", encodeURIComponent(versionIdEl.value.trim()))\n    .replaceAll(\"{{processing_key}}\", encodeURIComponent(processingKeyEl.value.trim()));\n}\n\nfunction deepReplace(obj){\n  if(typeof obj === \"string\") return replaceVars(obj);\n  if(Array.isArray(obj)) return obj.map(deepReplace);\n  if(obj && typeof obj === \"object\"){\n    const out = {};\n    Object.keys(obj).forEach(k => out[k] = deepReplace(obj[k]));\n    return out;\n  }\n  return obj;\n}\n\nfunction updateCurl(){\n  const method = methodEl.value;\n  const path = pathEl.value;\n  const body = bodyEl.value;\n  const hasToken = tokenEl.value.trim().length > 0;\n\n  let curl = `BASE=\"http://raptor_open_0_3_api.dhtsolution.com:8012\"\\nTOKEN=\"YOUR_TOKEN\"\\n\\ncurl -i -s -X ${method} \"$BASE${path}\" \\\\\\n-H \"Accept: application/json\"`;\n\n  if(hasToken){\n    curl += ` \\\\\\n-H \"Authorization: Bearer $TOKEN\"`;\n  }\n\n  if(path === \"/api/0.3/sso/login\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/x-www-form-urlencoded\" \\\\\\n-d \"username=accusys_user1&password=********&realm_name=dhtsolution\"`;\n  }else if(method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/json\"`;\n    if(body.trim() && body.trim() !== \"{}\"){\n      curl += ` \\\\\\n-d \'${body}\'`;\n    }\n  }\n\n  curlEl.value = curl;\n}\n\nfunction setTemplate(key){\n  currentTemplateKey = key;\n  const t = templates[key];\n  if(!t) return;\n\n  methodEl.value = t.method;\n  pathEl.value = replaceVars(t.path);\n  bodyEl.value = JSON.stringify(deepReplace(t.body), null, 2);\n  updateCurl();\n}\n\ninitLogName();\nsetTemplate(\"health\");\n\nconst savedToken = localStorage.getItem(\"raptor_token_v1\");\nif(savedToken){\n  tokenEl.value = savedToken;\n  updateCurl();\n}\n\ndocument.querySelectorAll(\"[data-template]\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    setTemplate(btn.dataset.template);\n  });\n});\n\ndocument.querySelectorAll(\".section-toggle\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    const target = document.getElementById(btn.dataset.target);\n    const arrow = btn.querySelector(\"span\");\n    if(!target) return;\n    target.classList.toggle(\"open\");\n    if(arrow) arrow.textContent = target.classList.contains(\"open\") ? \"⌄\" : \"›\";\n  });\n});\n\nmethodEl.addEventListener(\"change\", updateCurl);\npathEl.addEventListener(\"input\", updateCurl);\nbodyEl.addEventListener(\"input\", updateCurl);\ntokenEl.addEventListener(\"input\", ()=>{\n  localStorage.setItem(\"raptor_token_v1\", tokenEl.value.trim());\n  updateCurl();\n});\n\n[queryEl, assetPathEl, filenameEl, versionIdEl, processingKeyEl].forEach(input=>{\n  input.addEventListener(\"input\", ()=>{\n    setTemplate(currentTemplateKey);\n  });\n});\n\ndocument.getElementById(\"renewLogBtn\").addEventListener(\"click\", ()=>{\n  const next = makeLogName();\n  localStorage.setItem(\"raptor_current_log_name_v1\", next);\n  logNameEl.value = next;\n  resultBox.textContent = \"New log file created: \" + next + \".log\";\n});\n\ndocument.getElementById(\"copyCurlBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(curlEl.value);\n  alert(\"curl copied\");\n});\n\ndocument.getElementById(\"copyResponseBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(resultBox.textContent);\n  alert(\"response copied\");\n});\n\ndocument.getElementById(\"runBtn\").addEventListener(\"click\", async()=>{\n  resultBox.textContent = \"Running...\";\n\n  try{\n    const parsedBody = JSON.parse(bodyEl.value || \"{}\");\n    const t = templates[currentTemplateKey] || {group:\"General\",name:\"Manual API\"};\n\n    if(t.group === \"Dangerous\"){\n      if(!confirm(\"This is a Dangerous API. Continue?\")) {\n        resultBox.textContent = \"Cancelled.\";\n        return;\n      }\n    }\n\n    const res = await fetch(\"/wp-json/raptor/v1/api-test\",{\n      method:\"POST\",\nheaders:{\n  \"Content-Type\":\"application/json\",\n  \"X-WP-Nonce\": wpRestNonce\n},      body:JSON.stringify({\n        method:methodEl.value,\n        path:pathEl.value,\n        body:parsedBody,\n        token:tokenEl.value.trim(),\n        log_name:logNameEl.value,\n        api_group:t.group,\n        api_name:t.name\n      })\n    });\n\n    const data = await res.json();\n    resultBox.textContent = JSON.stringify(data,null,2);\n\n    const token =\n      data?.data?.access_token ||\n      data?.data?.token ||\n      data?.data?.accessToken ||\n      \"\";\n\n    if(token){\n      tokenEl.value = token;\n      localStorage.setItem(\"raptor_token_v1\", token);\n      updateCurl();\n    }\n\n  }catch(err){\n    resultBox.textContent = \"Error: \" + err.message;\n  }\n});\n\nasync function logAction(action){\n  const res = await fetch(\"/wp-json/raptor/v1/api-log\",{\n    method:\"POST\",\nheaders:{\n  \"Content-Type\":\"application/json\",\n  \"X-WP-Nonce\": wpRestNonce\n},    body:JSON.stringify({\n      action,\n      log_name:logNameEl.value\n    })\n  });\n  return await res.json();\n}\n\ndocument.getElementById(\"viewLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  resultBox.textContent = data.content || \"(empty log)\";\n});\n\ndocument.getElementById(\"clearLogBtn\").addEventListener(\"click\", async()=>{\n  if(!confirm(\"Clear current log file?\")) return;\n  const data = await logAction(\"clear\");\n  resultBox.textContent = JSON.stringify(data,null,2);\n});\n\ndocument.getElementById(\"downloadLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  const blob = new Blob([data.content || \"\"], {type:\"text/plain\"});\n  const url = URL.createObjectURL(blob);\n\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = logNameEl.value + \".log\";\n  a.click();\n\n  URL.revokeObjectURL(url);\n});\n</script>\n\n<?php\nreturn ob_get_clean();\n});','可以把 RAPTOR API 全部在這裡快速測試','global',0,10,1,'2026-05-27 13:54:31',1,NULL),
(66,'Search-chat','<p>搜索后缩略图可以显示，但是视频暂时播放不了</p>','\n/**\n * Momentry Search Chat CSS + JS\n * 覆盖版：新增底部搜索栏 Keyword / Semantic / People 模式选择。\n * 只在 search-chat 页面加载。 momentry test345\n */\n\n\n/*\n|--------------------------------------------------------------------------\n| Momentry Search Proxy\n| API Key must stay in PHP. Frontend only calls /wp-json/momentry/v1/search-proxy\n|--------------------------------------------------------------------------\n*/\n// ====== search-chat JS 修复重复显示版本 ======\n\n// 全局变量\nvar LAST_QUERY = \'\';\nvar LAST_CARDS = [];\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar SEARCH_RESTORED = false;\nvar RENDERED_MSGS = new Set(); // 用于去重渲染\n\n// 包装原来的 send 和 renderSearchSuccess\nfunction renderOnce(query, cards, mid){\n  mid = mid || \'m\' + Date.now();\n  if(RENDERED_MSGS.has(mid)) return;\n  RENDERED_MSGS.add(mid);\n\n  var chatEl = document.getElementById(\'msChat\');\n  if(chatEl){\n    chatEl.querySelectorAll(\'.maiw\').forEach(function(el){ el.remove(); });\n  }\n\n  aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, mid, query);\n}\n\n// 修改 send 函数\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderOnce(t, cards, \'send_\'+Date.now());\n      else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){ hideL(); loading=false; renderSearchError(); });\n}\n\n// 修改 restoreHistoryByResearch\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL();\n      var results=Array.isArray(res.results)?res.results:[];\n      var cards=mapResultsToCards(results);\n      LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      if(cards.length > 0) renderOnce(picked.query, cards, \'restore_\'+picked.id);\n      else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl?chatEl.innerHTML:\'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    }).catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\n// 修改 sidebar restore\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  if(!picked) return;\n  switchToSearch();\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  var inpEl=document.getElementById(\'msInp\'); if(inpEl) inpEl.value=picked.query||\'\';\n  CURRENT_HISTORY_ID=picked.id||null; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n  LAST_CARDS = Array.isArray(picked.cardsData)?picked.cardsData.slice():[]; rebuildCardMap(LAST_CARDS);\n  sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml||\'\');\n  sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n  sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id||\'\'));\n  sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n  renderOnce(picked.query, LAST_CARDS, \'sidebar_\'+picked.id);\n  setTimeout(function(){ rebindAllCardEvents(); sb(); applySyncedTheme(); },80);\n};\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/search-proxy\', [\n    \'methods\'  => [\'GET\', \'POST\'],\n    \'permission_callback\' => \'__return_true\',\n\n    \'callback\' => function (WP_REST_Request $request) {\n\n      $base = \'http://192.168.110.201:3002\';\n      $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n      // Demo UUID provided for current search demo.\n      $demo_uuid = \'aeed71342a899fe4b4c57b7d41bcb692\';\n\n      $mode  = sanitize_text_field($request->get_param(\'mode\'));\n      $query = sanitize_text_field($request->get_param(\'query\'));\n\n      if (!$query) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => \'Missing query\'\n        ], 400);\n      }\n\n      if ($mode === \'semantic\') {\n\n        $url = $base . \'/api/v1/search/smart\';\n        $body = [\n          \'query\'     => $query,\n          \'limit\'     => 20,\n          \'page\'      => 1,\n          \'page_size\' => 20,\n        ];\n\n        $args = [\n          \'method\'  => \'POST\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'Content-Type\' => \'application/json\',\n            \'X-API-Key\'    => $api_key,\n          ],\n          \'body\' => wp_json_encode($body),\n        ];\n\n      } elseif ($mode === \'people\') {\n\n        $url = $base . \'/api/v1/identities/search?q=\' . rawurlencode($query)\n     . \'&limit=20\'\n     //. \'&page=1\'\n     //. \'&page_size=20\'\n			;\n        $args = [\n          \'method\'  => \'GET\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'X-API-Key\' => $api_key,\n          ],\n        ];\n\n      } else {\n\n        // Default: keyword / universal search.\n        $url = $base . \'/api/v1/search/universal\';\n        $body = [\n          \'query\'     => $query,\n          \'limit\'     => 20,\n          \'page\'      => 1,\n          \'page_size\' => 20,\n        ];\n\n        $args = [\n          \'method\'  => \'POST\',\n          \'timeout\' => 60,\n          \'headers\' => [\n            \'Content-Type\' => \'application/json\',\n            \'X-API-Key\'    => $api_key,\n          ],\n          \'body\' => wp_json_encode($body),\n        ];\n      }\n\n      $response = wp_remote_request($url, $args);\n\n      if (is_wp_error($response)) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => $response->get_error_message(),\n        ], 500);\n      }\n\n      $code = wp_remote_retrieve_response_code($response);\n      $raw_body = wp_remote_retrieve_body($response);\n      $decoded = json_decode($raw_body, true);\n\n      if ($decoded === null && json_last_error() !== JSON_ERROR_NONE) {\n        return new WP_REST_Response([\n          \'success\' => false,\n          \'message\' => \'Invalid JSON from upstream API\',\n          \'raw\'     => $raw_body,\n        ], $code ?: 500);\n      }\n\n      return new WP_REST_Response($decoded, $code);\n    }\n  ]);\n});\n\nadd_action(\'wp_head\', function () {\n  if (!is_page(\'search-chat\')) return;\n  ?>\n<link href=\"https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600&amp;family=Noto+Sans+TC:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\n:root{\n  --accent:#e8724a;--accent-light:#fde8df;--accent-dark:#c95c38;\n  --text-1:#111318;--text-2:#5a6072;--text-3:#9ba3b4;\n  --border:#e8eaed;--surface:#fff;--surface-2:#f7f8fa;\n  --shadow-sm:0 1px 3px rgba(0,0,0,.07);\n  --shadow-md:0 4px 16px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);\n  --shadow-xl:0 24px 60px rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.08);\n  --font:\'Instrument Sans\',\'Noto Sans TC\',-apple-system,BlinkMacSystemFont,sans-serif;\n  --font-mono:\'SF Mono\',\'Menlo\',\'Monaco\',\'Consolas\',monospace;\n  --r:12px;--r-lg:18px;--r-xl:24px;\n}\n\n#msP{\n  all:initial;display:flex;flex-direction:column;height:100%;\n  font-family:var(--font);font-size:14px;line-height:1.55;\n  color:var(--text-1);-webkit-font-smoothing:antialiased;\n  position:relative;box-sizing:border-box;\n  background:#fff !important;\n  padding:20px 24px 20px 24px;\n}\n#msP *,#msP *::before,#msP *::after{box-sizing:border-box;margin:0;padding:0;}\n\n#msP .topbar{\n  display:flex;align-items:center;justify-content:flex-end;\n  padding:0 0 24px;flex-shrink:0;position:relative;\n}\n#msP .tbacts{display:flex;gap:10px;}\n#msP .icobtn{\n  all:unset;width:36px;height:36px;border-radius:50%;background:var(--surface);\n  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;\n  cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-2);transition:background .15s;\n}\n#msP .icobtn:hover{background:var(--surface-2);}\n#msP .icobtn svg{display:block;}\n\n#msP .chat{\n  flex:1;min-height:0;overflow-y:auto;\n  padding:0 8px 16px 4px;scroll-behavior:smooth;\n}\n#msP .chat::-webkit-scrollbar{width:4px;}\n#msP .chat::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n\n#msP .empty-state{\n  height:100%;display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  gap:8px;text-align:center;pointer-events:none;\n}\n#msP .empty-state .es-title{font-size:20px;font-weight:500;color:var(--text-2);}\n#msP .empty-state .es-sub{font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;}\n\n#msP .mtime{text-align:center;font-size:11.5px;color:var(--text-3);margin-bottom:20px;}\n\n#msP .mu{display:flex;justify-content:flex-end;margin-bottom:20px;}\n\n#msP .mub{\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  color:var(--sync-accent-dark, var(--accent-dark));\n  border-radius:18px 18px 4px 18px;\n  padding:12px 18px;\n  font-size:14px;\n  max-width:60%;\n  box-shadow:0 1px 3px rgba(0,0,0,.05);\n  line-height:1.5;\n}\n\n#msP .maiw{margin-bottom:28px;}\n#msP .mait{font-size:15px;color:var(--text-1);line-height:1.75;margin-bottom:6px;}\n#msP .mait p{margin-bottom:6px;}\n\n/* ── 書籤高亮樣式 ── */\n#msP .ms-bk-highlight{\n  background:rgba(250,220,50,0.38);\n  border-radius:3px;\n  padding:1px 2px;\n  cursor:pointer;\n  scroll-margin-top:12px;\n  transition:background .2s;\n}\n#msP .ms-bk-highlight:hover{\n  background:rgba(250,200,30,0.58);\n}\n#msP .ms-bk-highlight.ms-bk-pulse{\n  background:rgba(250,200,30,0.72) !important;\n}\n\n#msSelBKPop{\n  display:none;position:fixed;z-index:5000;background:var(--text-1);color:#fff;\n  border-radius:8px;padding:5px 12px;font-size:12px;font-family:var(--font);font-weight:500;\n  white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.22);cursor:pointer;\n  align-items:center;gap:6px;transition:opacity .15s;user-select:none;\n}\n#msSelBKPop.on{display:flex;}\n#msSelBKPop:hover{background:#2a2f3a;}\n#msSelBKPop svg{width:12px;height:12px;flex-shrink:0;}\n#msSelBKPop::after{\n  content:\'\';position:absolute;top:100%;left:50%;transform:translateX(-50%);\n  border:5px solid transparent;border-top-color:var(--text-1);\n}\n\n#msP .cards-out{margin-top:14px;position:relative;padding:0;}\n#msP .cards-strip{\n  background:rgba(247,248,250,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);\n  border:1px solid rgba(232,234,237,0.8);border-radius:var(--r-lg);\n  padding:16px 52px 16px 16px;position:relative;\n}\n#msP .cards-sc{display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scroll-behavior:smooth;}\n#msP .cards-sc::-webkit-scrollbar{height:0;}\n\n#msP .arr{\n  all:unset;position:absolute;top:50%;transform:translateY(-50%);\n  width:32px;height:32px;border-radius:50%;\n  background:var(--sync-accent-light, var(--accent-light));\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 2px 8px rgba(0,0,0,.10);\n  display:flex;align-items:center;justify-content:center;\n  cursor:pointer;color:var(--sync-accent-dark, var(--accent-dark));font-size:18px;\n  transition:background .15s,color .15s,opacity .2s,transform .15s;\n  z-index:3;opacity:0;pointer-events:none;\n}\n#msP .arr.on{opacity:1;pointer-events:auto;}\n#msP .arr:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n}\n#msP .arrl{left:10px;}\n#msP .arrr{right:10px;}\n\n#msP .card{\n  flex-shrink:0;width:200px;background:transparent;border-radius:0;overflow:visible;border:none;\n  box-shadow:none;cursor:pointer;transition:transform .18s;\n}\n#msP .card:hover{transform:translateY(-3px);}\n#msP .cthumb{\n  width:100%;height:120px;\n  background:linear-gradient(145deg,rgba(245,245,250,0.98),rgba(228,230,238,0.92));\n  position:relative;overflow:hidden;border-radius:10px;\n}\n#msP .cthumb img,#msP .cthumb video{\n  width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\n}\n#msP .cthumb-loader{\n  position:absolute;inset:0;z-index:2;border-radius:10px;background:rgba(242,243,248,0.94);\n  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);\n}\n#msP .cthumb-loader::after{\n  content:\'\';position:absolute;inset:0;\n  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.72) 50%,transparent 100%);\n  background-size:200% 100%;animation:msShimmer 1.6s infinite linear;\n}\n@keyframes msShimmer{from{background-position:200% 0}to{background-position:-200% 0}}\n\n#msP .cplay{\n  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n  background:rgba(0,0,0,.12);opacity:0;transition:opacity .22s;border-radius:10px;\n}\n#msP .card:hover .cthumb.isv .cplay{opacity:1;}\n#msP .cplayicon{\n  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);\n  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);\n  border:1px solid rgba(255,255,255,.38);display:flex;align-items:center;justify-content:center;\n  box-shadow:0 1px 6px rgba(0,0,0,.18);\n}\n#msP .cplayicon svg{width:13px;height:13px;fill:#fff;margin-left:2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}\n#msP .cdur{\n  position:absolute;bottom:6px;right:7px;background:rgba(0,0,0,.58);color:#fff;\n  font-size:9.5px;font-family:var(--font-mono);padding:2px 5px;border-radius:3px;letter-spacing:0.02em;\n}\n\n#msP .fullview-btn{\n  all:unset;\n  flex-shrink:0;\n  display:inline-flex;\n  align-items:center;\n  gap:5px;\n  font-family:var(--font);\n  font-size:12px;\n  font-weight:500;\n  color:var(--sync-accent-dark, var(--accent-dark));\n  padding:5px 14px;\n  border:1px solid var(--sync-accent-light, var(--accent-light));\n  border-radius:99px;\n  cursor:pointer;\n  transition:background .15s,color .15s,border-color .15s;\n  text-decoration:none;\n  white-space:nowrap;\n  align-self:flex-end;\n  margin-bottom:2px;\n  background:var(--sync-accent-light, var(--accent-light));\n  letter-spacing:0.01em;\n}\n#msP .fullview-btn:hover{\n  background:var(--sync-accent, var(--accent));\n  color:#fff;\n  border-color:var(--sync-accent, var(--accent));\n}\n\n#msP .cviewbtn{\n  position:absolute;bottom:8px;right:8px;display:inline-flex;align-items:center;\n  background:rgba(255,255,255,.92);color:var(--text-1);font-size:11px;font-weight:500;\n  font-family:var(--font);padding:4px 10px;border-radius:99px;box-shadow:0 1px 6px rgba(0,0,0,.14);\n  text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s,background .15s;\n  white-space:nowrap;z-index:4;letter-spacing:0.01em;border:1px solid rgba(0,0,0,.06);\n}\n#msP .card:hover .cviewbtn{opacity:1;pointer-events:auto;}\n#msP .cviewbtn:hover{background:#fff;}\n\n#msP .cbody{padding:9px 2px 4px;}\n#msP .cname{\n  font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:4px;\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.015em;font-family:var(--font);\n}\n#msP .cmeta{\n  font-family:var(--font);font-size:11px;font-weight:400;color:var(--text-2);\n  line-height:1.65;letter-spacing:-0.01em;\n}\n#msP .cmeta div{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal;}\n\n#msP .ibar{flex-shrink:0;padding:16px 4px 4px;}\n#msP .iwrap{\n  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);\n  border-radius:99px;padding:10px 16px 10px 20px;box-shadow:var(--shadow-md);transition:box-shadow .2s,border-color .2s;\n}\n#msP .iwrap:focus-within{\n  border-color:var(--sync-accent-light, var(--accent-light));\n  box-shadow:0 0 0 3px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 55%, white), var(--shadow-md);\n}\n\n#msP .iwrap svg{flex-shrink:0;color:var(--text-3);}\n#msP .ifield{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msP .ifield::placeholder{color:var(--text-3);}\n#msP .micbtn{\n  all:unset;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;\n  justify-content:center;cursor:pointer;color:var(--text-3);transition:color .15s,background .15s;\n}\n#msP .micbtn:hover{\n  color:var(--sync-accent-dark, var(--accent-dark));\n  background:var(--sync-accent-light, var(--accent-light));\n}\n\n#msP .ldots{display:flex;align-items:center;gap:5px;padding:16px 0 8px;}\n#msP .ldots span{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:msDot 1.2s infinite ease-in-out;}\n#msP .ldots span:nth-child(2){animation-delay:.2s;}\n#msP .ldots span:nth-child(3){animation-delay:.4s;}\n@keyframes msDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}\n\n#msMM{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.78);align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;}\n#msMM.on{display:flex;animation:msFI .2s ease;}\n#msMM .mmbox{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:min(780px,100%);max-height:calc(100vh - 48px);overflow:hidden;display:flex;flex-direction:column;animation:msSU .22s ease;flex-shrink:0;}\n#msMM .mmed{flex-shrink:0;background:#111;display:flex;align-items:center;justify-content:center;position:relative;max-height:min(380px, 40vh);overflow:hidden;}\n#msMM .mmed img{max-width:100%;max-height:min(380px, 40vh);object-fit:contain;display:block;}\n#msMM .mmed video{width:100%;max-height:min(380px, 40vh);display:block;outline:none;}\n#msMM .mminf{padding:22px 28px 24px;overflow-y:auto;flex:1;min-height:0;}\n#msMM .mminf::-webkit-scrollbar{width:4px;}\n#msMM .mminf::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msMM .mmttl{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:14px;letter-spacing:-0.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}\n#msMM .mmbadge{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:99px;font-weight:500;letter-spacing:0.02em;}\n#msMM .mmbadge.ph,#msMM .mmbadge.vi{background:#fff;color:var(--text-2);border:1px solid var(--border);}\n#msMM .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px;font-family:var(--font-mono);font-size:11.5px;font-weight:400;color:var(--text-2);margin-bottom:16px;letter-spacing:0;line-height:1.7;}\n#msMM .mmrow{display:flex;align-items:baseline;gap:0;}\n#msMM .mmkey{color:var(--text-3);margin-right:6px;flex-shrink:0;}\n#msMM .mmval{color:var(--text-1);font-weight:500;}\n#msMM .mmdesc{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-bottom:20px;padding:12px 14px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);letter-spacing:0.01em;}\n#msMM .mmacts{display:flex;gap:10px;flex-wrap:wrap;}\n#msMM .mmbtn{all:unset;display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font);}\n#msMM .mmbtn.pri{background:#fff;color:var(--text-1);border:1px solid #d0d3da;box-shadow:0 1px 3px rgba(0,0,0,.06);}\n#msMM .mmbtn.pri:hover{background:var(--surface-2);border-color:#b8bcc6;}\n#msMM .mmbtn.sec{background:var(--surface-2);color:var(--text-1);border:1px solid var(--border);}\n#msMM .mmbtn.sec:hover{background:#eef0f3;}\n@media (max-width: 600px){#msMM{padding:0;align-items:flex-end;}#msMM .mmbox{width:100%;max-height:90vh;border-radius:var(--r-xl) var(--r-xl) 0 0;}}\n\n#msBK{display:none;position:absolute;top:60px;right:0;width:260px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:14px 0 10px;z-index:1200;}\n#msBK.on{display:block;animation:msFI .18s ease;}\n#msBK .bkh{display:flex;align-items:center;padding:0 16px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}\n#msBK .bkht{font-size:13px;font-weight:600;color:var(--text-1);flex:1;}\n#msBK .bkx{all:unset;cursor:pointer;font-size:15px;color:var(--text-3);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;}\n#msBK .bkx:hover{background:var(--surface-2);}\n#msBK .bkrow{display:flex;align-items:center;gap:8px;padding:7px 14px;cursor:pointer;transition:background .12s;border-radius:8px;margin:0 4px;}\n#msBK .bkrow:hover{background:var(--surface-2);}\n#msBK .bkchip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:500;}\n#msBK .bkchip svg{width:11px;height:11px;color:var(--text-3);}\n#msBK .bkrm{all:unset;margin-left:auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);cursor:pointer;font-size:12px;transition:background .12s,color .12s;flex-shrink:0;}\n#msBK .bkrm:hover{background:var(--surface-2);color:var(--text-1);}\n#msBK .bkempty{padding:20px 16px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.6;}\n\n#msHO{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:120px;}\n#msHO.on{display:flex;animation:msFI .18s ease;}\n#msHOB{width:700px;max-width:90vw;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;}\n#msHOB .hir{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--border);}\n#msHOB .hir svg{color:var(--text-3);flex-shrink:0;}\n#msHOB .hii{all:unset;flex:1;font-size:14px;font-family:var(--font);color:var(--text-1);caret-color:var(--accent);}\n#msHOB .hii::placeholder{color:var(--text-3);}\n#msHOB .hires{max-height:320px;overflow-y:auto;padding:6px 0;}\n#msHOB .hires::-webkit-scrollbar{width:4px;}\n#msHOB .hires::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px;}\n#msHOB .hiitem{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:background .12s;gap:12px;}\n#msHOB .hiitem:hover{background:var(--surface-2);}\n#msHOB .hiil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}\n#msHOB .hiic{color:var(--text-3);flex-shrink:0;}\n#msHOB .hiit{font-size:13px;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .hiis{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n#msHOB .himt{padding:32px 20px;text-align:center;font-size:13px;color:var(--text-3);}\n\n#msCM{display:none;position:fixed;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-xl);border:1px solid var(--border);padding:6px 0;width:180px;z-index:2000;}\n#msCM.on{display:block;animation:msFI .12s ease;}\n#msCM .ci{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;color:var(--text-1);cursor:pointer;transition:background .1s;}\n#msCM .ci:hover{background:var(--surface-2);}\n#msCM .ci.dng{color:#d93025;font-weight:600;}\n#msCM .ci svg{width:15px;height:15px;flex-shrink:0;opacity:.7;}\n#msCM .ci.dng svg{opacity:1;color:#d93025;}\n#msCM .cdv{height:1px;background:var(--border);margin:4px 0;}\n\n@keyframes msFI{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n@keyframes msSU{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n\n#ms-view-search {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n#ms-view-searchlab {\n  display: none;\n  height: 100%;\n  overflow-y: auto;\n  padding: 32px 36px;\n  font-family: var(--font);\n  box-sizing: border-box;\n  background: #fff;\n}\n.ms-search-lab-header { margin-bottom: 28px; }\n.ms-search-lab-header h1 {\n  font-size: 20px; font-weight: 600; color: #111827;\n  margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; font-family: var(--font);\n}\n.ms-search-lab-header p { font-size: 13px; color: #9ca3af; margin: 0; font-family: var(--font); line-height: 1.6; }\n.ms-lab-badge {\n  display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 2px 9px;\n}\n.ms-lab-grid { display: grid; gap: 16px; max-width: 860px; }\n.ms-lab-card {\n  background: #fff; border-radius: 12px; padding: 20px 24px;\n  box-shadow: none; border: 1px solid #e5e7eb;\n}\n.ms-lab-card-title {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.08em;\n  margin-bottom: 16px; font-family: var(--font);\n}\n.ms-lab-trigger-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }\n#msRunEvalBtn {\n  display: inline-flex; align-items: center; gap: 8px;\n  background: #111827; color: #fff; border: none; border-radius: 8px;\n  padding: 9px 20px; font-size: 13px; font-weight: 500;\n  cursor: pointer; font-family: var(--font);\n  transition: background .15s; box-shadow: none;\n}\n#msRunEvalBtn:hover { background: #374151; }\n#msRunEvalBtn:active { transform: scale(0.97); }\n#msRunEvalBtn:disabled { background: #9ca3af; cursor: not-allowed; }\n.ms-lab-trigger-note { font-size: 12px; color: #9ca3af; font-family: var(--font); }\n.ms-lab-spinner {\n  display: none; width: 14px; height: 14px;\n  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;\n  border-radius: 50%; animation: ms-spin 0.7s linear infinite;\n}\n@keyframes ms-spin { to { transform: rotate(360deg); } }\n.ms-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }\n.ms-metric-item {\n  background: #f9fafb; border-radius: 10px; padding: 16px 14px;\n  text-align: center; border: 1px solid #f3f4f6; position: relative; overflow: hidden;\n}\n.ms-metric-item::before {\n  content: \'\'; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px; background: #d1d5db; border-radius: 2px 2px 0 0;\n}\n.ms-metric-label {\n  font-size: 11px; font-weight: 600; color: #9ca3af;\n  text-transform: uppercase; letter-spacing: 0.06em;\n  margin-bottom: 8px; font-family: var(--font);\n}\n.ms-metric-value {\n  font-size: 28px; font-weight: 600; color: #111827;\n  line-height: 1; margin-bottom: 5px; font-family: var(--font);\n}\n.ms-metric-value.good { color: #111827; }\n.ms-metric-value.warn { color: #111827; }\n.ms-metric-desc { font-size: 11px; color: #9ca3af; font-family: var(--font); }\n.ms-metrics-note {\n  margin-top: 12px; font-size: 11.5px; color: #9ca3af;\n  font-family: var(--font); display: flex; align-items: center; gap: 5px;\n}\n.ms-last-eval { display: flex; align-items: center; gap: 16px; }\n.ms-last-eval-icon {\n  width: 36px; height: 36px; background: #f3f4f6;\n  border-radius: 8px; display: flex; align-items: center;\n  justify-content: center; font-size: 16px; flex-shrink: 0;\n}\n.ms-last-eval-info { flex: 1; }\n.ms-last-eval-time { font-size: 15px; font-weight: 600; color: #111827; font-family: var(--font); font-variant-numeric: tabular-nums; }\n.ms-last-eval-meta { font-size: 12px; color: #9ca3af; margin-top: 2px; font-family: var(--font); }\n.ms-last-eval-status {\n  display: inline-flex; align-items: center; gap: 5px;\n  font-size: 12px; font-weight: 500; color: #6b7280;\n  background: #f3f4f6; border: 1px solid #e5e7eb;\n  border-radius: 999px; padding: 4px 12px; font-family: var(--font);\n}\n.ms-eval-toast {\n  display: none; align-items: center; gap: 8px;\n  background: #f9fafb; border: 1px solid #e5e7eb;\n  border-radius: 8px; padding: 10px 16px;\n  font-size: 13px; color: #374151; font-weight: 500;\n  margin-top: 14px; font-family: var(--font);\n}\n.ms-eval-toast.show { display: flex; }\n/* ✅ 右边 4-7 主画面：允许底部 search bar 往下，不影响功能 */\n.ms-main:has(#msP) {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 主容器底部不要再多留白 */\n#msP {\n  padding-bottom: 0 !important;\n  overflow: visible !important;\n}\n\n/* ✅ 让聊天区保留一点底部空间，避免结果卡片太贴近输入框 */\n#msP .chat {\n  padding-bottom: 24px !important;\n}\n\n/* ✅ 搜索框整体往下移：只移动位置，不改功能 */\n#msP .ibar {\n  padding: 16px 4px 0 !important;\n  transform: translateY(22px);\n  position: relative;\n  z-index: 20;\n}\n\n/* ✅ 搜索框阴影：跟着框一起下移，保留柔和立体感 */\n#msP .iwrap {\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px rgba(255,255,255,.75) inset !important;\n  transition: box-shadow .2s, border-color .2s, transform .2s;\n}\n\n/* ✅ 点击输入时的亮灯颜色：继续跟着左边主题颜色变 */\n/* ✅ 点击输入时：恢复成细细的主题色边框，不要大片橙色背景灯 */\n#msP .iwrap:focus-within {\n  border-color: var(--sync-accent-light, var(--accent-light)) !important;\n  box-shadow:\n    0 10px 26px rgba(0,0,0,.075),\n    0 2px 6px rgba(0,0,0,.04),\n    0 0 0 1px color-mix(in srgb, var(--sync-accent-light, var(--accent-light)) 72%, white) !important;\n}\n\n/* ✅ 光标颜色也跟着主题色 */\n#msP .ifield {\n  caret-color: var(--sync-accent-dark, var(--accent-dark)) !important;\n}\n/* ── Search mode selector: Keyword / Semantic / People ── */\n#msP .ms-chat-mode-wrap{\n  position:relative;\n  flex:0 0 auto;\n}\n\n#msP .ms-chat-mode-btn{\n  all:unset;\n  display:flex;\n  align-items:center;\n  gap:5px;\n  padding:6px 12px 6px 14px;\n  border-radius:999px;\n  font-size:13px;\n  font-weight:500;\n  color:rgba(0,0,0,.6);\n  cursor:pointer;\n  background:transparent;\n  transition:background .15s ease,color .15s ease;\n  white-space:nowrap;\n}\n\n#msP .ms-chat-mode-btn:hover{\n  background:rgba(0,0,0,.04);\n  color:rgba(0,0,0,.8);\n}\n\n#msP .ms-chat-mode-arrow{\n  font-size:12px;\n  line-height:1;\n  opacity:.75;\n  transition:transform .2s ease;\n}\n\n#msP .ms-chat-mode-btn.is-open .ms-chat-mode-arrow{\n  transform:rotate(180deg);\n}\n\n#msP .ms-chat-mode-menu{\n  display:block;\n  position:absolute;\n  right:0;\n  bottom:44px;\n  min-width:148px;\n  background:#fff;\n  border:1px solid rgba(0,0,0,.07);\n  border-radius:16px;\n  padding:6px;\n  box-shadow:0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);\n  z-index:999;\n  opacity:0;\n  transform:translateY(6px) scale(.97);\n  pointer-events:none;\n  transition:opacity .18s ease,transform .18s ease;\n}\n\n#msP .ms-chat-mode-menu.is-open{\n  opacity:1;\n  transform:translateY(0) scale(1);\n  pointer-events:auto;\n}\n\n#msP .ms-chat-mode-item{\n  display:flex;\n  align-items:center;\n  gap:9px;\n  padding:9px 12px;\n  border-radius:10px;\n  font-size:13px;\n  font-weight:450;\n  color:rgba(0,0,0,.65);\n  cursor:pointer;\n  user-select:none;\n  transition:background .12s ease,color .12s ease;\n}\n\n#msP .ms-chat-mode-item:hover{\n  background:rgba(0,0,0,.04);\n  color:rgba(0,0,0,.85);\n}\n\n#msP .ms-chat-mode-item.is-active{\n  background:rgba(0,0,0,.06);\n  color:#111;\n  font-weight:550;\n}\n\n#msP .ms-chat-mode-item-icon{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width:22px;\n  height:22px;\n  border-radius:6px;\n  background:rgba(0,0,0,.05);\n  flex:0 0 auto;\n  color:rgba(0,0,0,.5);\n}\n\n#msP .ms-chat-mode-item-icon svg{\n  display:block;\n}\n\n#msP .ms-chat-mode-item.is-active .ms-chat-mode-item-icon{\n  background:rgba(0,0,0,.08);\n  color:#111;\n}\n\n</style>\n  <?php\n});\n\nadd_action(\'wp_footer\', function () {\n  if (!is_page(\'search-chat\')) return;\n  ?>\n<script>\n	  window.renderFinderRows = window.renderFinderRows || function(){\n  return \'\';\n};\n\n(function(){\n\'use strict\';\n	\n	function renderFinderRows(){\n  return \'\';\n}\n\nvar FULL_VIEW_URL   = \'https://wp.momentry.ddns.net/ww-8/\';\nvar DETAIL_VIEW_URL = \'https://wp.momentry.ddns.net/ww-10/\';\nvar SEARCH_API_BASE = \'http://192.168.110.201:3002\';\nvar \n	_ENDPOINT  = \'https://accusys1.app.n8n.cloud/webhook/event\';\nvar THUMB_BASE      = \'https://wp.momentry.ddns.net/\';\n\nvar BKS = [];\nvar bkN = 0;\nvar loading = false;\nvar LAST_QUERY = \'\';\nvar CURRENT_SEARCH_MODE = (new URLSearchParams(window.location.search).get(\'mode\') || \'keyword\').toLowerCase();\nvar CM = {};\nvar CURRENT_HISTORY_ID = null;\nvar SHOULD_SAVE_HISTORY = false;\nvar LAST_CARDS = [];\n\nvar HISTORY_STORAGE_KEY = \'ms_search_history_v1_\' + (function(){\n  try{ var app=document.querySelector(\'.ms-app\'); return app&&app.dataset.currentLogin ? app.dataset.currentLogin : \'guest\'; }catch(e){ return \'guest\'; }\n})();\n\nvar DN = [\'Sun.\',\'Mon.\',\'Tue.\',\'Wed.\',\'Thu.\',\'Fri.\',\'Sat.\'];\nvar ICO_BK_FILLED = \'<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z\"/></svg>\';\n\nfunction hexToRgb(hex){\n  hex = String(hex || \'\').trim();\n  if(!hex) return null;\n  if(hex.charAt(0) === \'#\') hex = hex.slice(1);\n  if(hex.length === 3){ hex = hex.split(\'\').map(function(x){ return x + x; }).join(\'\'); }\n  if(hex.length !== 6) return null;\n  var num = parseInt(hex, 16);\n  if(isNaN(num)) return null;\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\n}\n\nfunction parseRgbString(str){\n  str = String(str || \'\').trim();\n  var m = str.match(/rgba?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)\\s*,\\s*([\\d.]+)/i);\n  if(!m) return null;\n  return { r: Math.round(parseFloat(m[1])), g: Math.round(parseFloat(m[2])), b: Math.round(parseFloat(m[3])) };\n}\n\nfunction rgbToString(rgb){ if(!rgb) return \'\'; return \'rgb(\' + rgb.r + \', \' + rgb.g + \', \' + rgb.b + \')\'; }\n\nfunction mixRgb(c1, c2, ratio){\n  ratio = Math.max(0, Math.min(1, Number(ratio || 0)));\n  return { r: Math.round(c1.r + (c2.r - c1.r) * ratio), g: Math.round(c1.g + (c2.g - c1.g) * ratio), b: Math.round(c1.b + (c2.b - c1.b) * ratio) };\n}\n\nfunction getSidebarThemeColor(){\n  var homeCandidates = [\'.gs-nav a.active\',\'.gs-nav .active\',\'.gs-nav a[href*=\"lt-searching\"]\',\'.gs-nav a[href*=\"home\"]\',\'.gs-nav a\'];\n  for(var i=0;i<homeCandidates.length;i++){\n    var el = document.querySelector(homeCandidates[i]); if(!el) continue;\n    var text = (el.textContent || \'\').replace(/\\s+/g,\' \').trim().toLowerCase();\n    var isHomeLike = text.indexOf(\'home\') > -1 || text.indexOf(\'首頁\') > -1 || text.indexOf(\'主页\') > -1;\n    var cs = window.getComputedStyle(el); var bg = cs.backgroundColor; var color = cs.color;\n    if(isHomeLike && bg && bg !== \'rgba(0, 0, 0, 0)\' && bg !== \'transparent\'){ return { accentLight: bg, accentDark: color && color !== \'rgba(0, 0, 0, 0)\' ? color : null }; }\n  }\n  var activeEl = document.querySelector(\'.gs-nav a.active, .gs-nav .active\');\n  if(activeEl){ var cs2 = window.getComputedStyle(activeEl); if(cs2.backgroundColor && cs2.backgroundColor !== \'rgba(0, 0, 0, 0)\' && cs2.backgroundColor !== \'transparent\'){ return { accentLight: cs2.backgroundColor, accentDark: cs2.color }; } }\n  return null;\n}\n\nfunction applySyncedTheme(){\n  var root = document.getElementById(\'msP\'); if(!root) return;\n  var theme = getSidebarThemeColor(); if(!theme || !theme.accentLight) return;\n  var lightRgb = parseRgbString(theme.accentLight) || hexToRgb(theme.accentLight); if(!lightRgb) return;\n  var darkRgb = parseRgbString(theme.accentDark) || hexToRgb(theme.accentDark);\n  if(!darkRgb){ darkRgb = { r: 90, g: 96, b: 114 }; }\n  var accentRgb = mixRgb(lightRgb, darkRgb, 0.35);\n  root.style.setProperty(\'--sync-accent-light\', rgbToString(lightRgb));\n  root.style.setProperty(\'--sync-accent-dark\', rgbToString(darkRgb));\n  root.style.setProperty(\'--sync-accent\', rgbToString(accentRgb));\n}\n\nfunction watchThemeSync(){\n  applySyncedTheme();\n  if(!window.MutationObserver) return;\n  var target = document.body || document.documentElement; if(!target) return;\n  var mo = new MutationObserver(function(){ clearTimeout(window.__msThemeSyncTimer); window.__msThemeSyncTimer = setTimeout(function(){ applySyncedTheme(); }, 50); });\n  mo.observe(target,{attributes:true,childList:true,subtree:true,attributeFilter:[\'class\',\'style\']});\n  document.addEventListener(\'click\', function(){ setTimeout(applySyncedTheme, 30); setTimeout(applySyncedTheme, 120); setTimeout(applySyncedTheme, 260); });\n  window.addEventListener(\'storage\', function(){ setTimeout(applySyncedTheme, 80); });\n}\n\nfunction switchToSearchLab() {\n  var role = window.MS_USER_ROLE || \'guest\';\n  if (role !== \'admin\' && role !== \'editor\') { return; }\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'none\'; if(vl) vl.style.display = \'block\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var labBtn = document.getElementById(\'gsSearchLabBtn\'); if(labBtn) labBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'searchlab\'); }catch(e){}\n}\n\nfunction switchToSearch() {\n  var vs = document.getElementById(\'ms-view-search\'); var vl = document.getElementById(\'ms-view-searchlab\');\n  if(vs) vs.style.display = \'\'; if(vl) vl.style.display = \'none\';\n  document.querySelectorAll(\'.gs-nav a\').forEach(function(a){ a.classList.remove(\'active\'); });\n  var homeBtn = document.querySelector(\'.gs-nav a[href=\"/lt-searching/\"]\'); if(homeBtn) homeBtn.classList.add(\'active\');\n  try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n}\n\ndocument.addEventListener(\'click\', function(ev){\n  var labBtn = ev.target.closest(\'#gsSearchLabBtn\');\n  if(labBtn){ ev.preventDefault(); switchToSearchLab(); }\n});\n\ndocument.addEventListener(\'DOMContentLoaded\', function(){\n  var runBtn = document.getElementById(\'msRunEvalBtn\');\n  var spinner = document.getElementById(\'msEvalSpinner\');\n  var toast = document.getElementById(\'msEvalToast\');\n  var lastRunEl = document.getElementById(\'msLastRunTime\');\n  if(runBtn){\n    runBtn.addEventListener(\'click\', function(){\n      runBtn.disabled = true;\n      if(spinner) spinner.style.display = \'block\';\n      runBtn.querySelector(\'.ms-btn-label\').textContent = \'Running…\';\n      setTimeout(function(){\n        runBtn.disabled = false;\n        if(spinner) spinner.style.display = \'none\';\n        runBtn.querySelector(\'.ms-btn-label\').textContent = \'▶ Run Evaluation\';\n        var now = new Date();\n        var pad = function(n){ return String(n).padStart(2,\'0\'); };\n        if(lastRunEl) lastRunEl.textContent = now.getFullYear()+\'-\'+pad(now.getMonth()+1)+\'-\'+pad(now.getDate())+\' \'+pad(now.getHours())+\':\'+pad(now.getMinutes());\n        if(toast){ toast.classList.add(\'show\'); setTimeout(function(){ toast.classList.remove(\'show\'); },4000); }\n      },2000);\n    });\n  }\n});\n\n// ====== 缩略图函数（使用 start_frame） ======\nfunction buildThumbUrl(videoId, startFrame){\n  if(!videoId) return \'\';\n  var url = new URL(\'/wp-json/momentry/v1/media\', window.location.origin);\n  url.searchParams.set(\'uuid\', videoId);\n  url.searchParams.set(\'type\', \'thumbnail\');\n  if(startFrame !== undefined) url.searchParams.set(\'frame\', startFrame);\n  return url.toString();\n}\n					\nfunction buildQueryUrl(base, params){\n  var url = new URL(base, window.location.origin);\n  Object.keys(params || {}).forEach(function(key){ var val = params[key]; if(val !== undefined && val !== null && val !== \'\') url.searchParams.set(key, String(val)); });\n  return url.toString();\n}\nfunction e(s){ return String(s == null ? \'\' : s).replace(/&/g,\'&amp;\').replace(/</g,\'&lt;\').replace(/>/g,\'&gt;\'); }\nfunction sb(){ var c=document.getElementById(\'msChat\'); setTimeout(function(){ if(c) c.scrollTop=c.scrollHeight; },60); }\nfunction normalizeClipTimes(start, end){ var s=Number(start||0), e2=Number(end||0); if(e2<=0)e2=s; else if(e2<s)e2=s+e2; return {start:s,end:e2}; }\nfunction formatDuration(sec){ var total=Math.floor(Number(sec||0)), m=Math.floor(total/60), s=total%60; return String(m).padStart(2,\'0\') + \':\' + String(s).padStart(2,\'0\'); }\nfunction formatDate(iso){ if(!iso) return \'\'; var d=new Date(iso); if(isNaN(d.getTime())) return iso; return d.getFullYear()+\'/\'+String(d.getMonth()+1).padStart(2,\'0\')+\'/\'+String(d.getDate()).padStart(2,\'0\'); }\nfunction todayLabel(){ var n=new Date(); return (n.getMonth()+1).toString().padStart(2,\'0\')+\'/\'+n.getDate().toString().padStart(2,\'0\')+\' \'+DN[n.getDay()]; }\nfunction nowISO(){ return new Date().toISOString(); }\nfunction getQueryFromUrl(){ var p = new URLSearchParams(window.location.search); return (p.get(\'q\') || \'\').trim(); }\n\nfunction saveChatState(query){\n  try{\n    var chatEl = document.getElementById(\'msChat\');\n    sessionStorage.setItem(\'ms_chat_html\', chatEl ? chatEl.innerHTML : \'\');\n    sessionStorage.setItem(\'ms_last_query\', query || \'\');\n    sessionStorage.setItem(\'ms_selected_history_id\', CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\');\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    var url = new URL(window.location.href);\n    url.searchParams.set(\'restore\', \'1\');\n    history.replaceState({}, \'\', url.toString());\n  }catch(err){ console.warn(\'saveChatState failed\', err); }\n}\n\nfunction showEmptyState(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.innerHTML=\'<div class=\"empty-state\" id=\"msEmptyState\"><p class=\"es-title\">今天想找什麼？</p><p class=\"es-sub\">輸入關鍵字，從你的影像庫中找出記憶中的畫面</p></div>\';\n}\nfunction hideEmptyState(){ var es=document.getElementById(\'msEmptyState\'); if(es) es.remove(); }\n\nfunction getSearchHistory(){ try{return JSON.parse(localStorage.getItem(HISTORY_STORAGE_KEY) || \'[]\');}catch(err){return[];} }\nfunction saveSearchHistory(items){ try{localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(items));}catch(err){} }\nfunction sortHistory(items){ return (items||[]).slice().sort(function(a,b){ if(!!a.pinned !== !!b.pinned) return a.pinned ? -1 : 1; return new Date(b.updatedAt||0).getTime() - new Date(a.updatedAt||0).getTime(); }); }\nfunction getHistoryById(id){ var items=getSearchHistory(); return items.find(function(it){return String(it.id)===String(id);})||null; }\n\nfunction upsertSearchHistory(query){\n  try{\n    var chatEl=document.getElementById(\'msChat\'); var chatHtml=chatEl ? chatEl.innerHTML : \'\';\n    var items=getSearchHistory(); var trimmed=String(query || \'\').trim(); if(!trimmed) return;\n    var existingIndex=items.findIndex(function(it){ if(CURRENT_HISTORY_ID) return String(it.id)===String(CURRENT_HISTORY_ID); return String(it.query||\'\').trim()===trimmed; });\n    var existing=existingIndex>-1 ? items[existingIndex] : null;\n    var newId=existing ? existing.id : (\'h_\' + Date.now() + \'_\' + Math.random().toString(36).slice(2,8));\n    var newItem={ id:newId, query:trimmed, title:existing&&existing.title ? existing.title : trimmed, snippet:\'搜尋紀錄\', chatHtml:chatHtml, cardsData:Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [], updatedAt:new Date().toISOString(), createdAt:existing&&existing.createdAt ? existing.createdAt : new Date().toISOString(), pinned:existing ? !!existing.pinned : false };\n    if(existingIndex>-1) items.splice(existingIndex,1);\n    else items = items.filter(function(it){ return String(it.query||\'\').trim() !== trimmed; });\n    items.unshift(newItem); items = sortHistory(items);\n    if(items.length>30) items = items.slice(0,30);\n    saveSearchHistory(items); CURRENT_HISTORY_ID = newId;\n    sessionStorage.setItem(\'ms_selected_history_id\', String(newId));\n    sessionStorage.setItem(\'ms_chat_html\', chatHtml);\n    sessionStorage.setItem(\'ms_last_query\', trimmed);\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(newId)}}));\n  }catch(err){ console.warn(\'upsertSearchHistory failed\', err); }\n}\n\nfunction updateHistoryRecordById(id, patch){\n  try{\n    if(!id) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){return String(it.id)===String(id);}); if(idx===-1) return;\n    items[idx]=Object.assign({}, items[idx], patch||{}, {updatedAt:new Date().toISOString()});\n    saveSearchHistory(sortHistory(items));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(id)}}));\n  }catch(err){}\n}\n\nfunction saveCurrentViewToCurrentHistory(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction persistCurrentHistoryView(){\n  try{\n    if(!CURRENT_HISTORY_ID) return; var items=getSearchHistory();\n    var idx=items.findIndex(function(it){ return String(it.id)===String(CURRENT_HISTORY_ID); }); if(idx===-1) return;\n    var chatEl=document.getElementById(\'msChat\');\n    items[idx].chatHtml = chatEl ? chatEl.innerHTML : \'\';\n    items[idx].cardsData = Array.isArray(LAST_CARDS) ? LAST_CARDS.slice() : [];\n    items[idx].updatedAt = new Date().toISOString();\n    saveSearchHistory(sortHistory(items));\n    sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:String(CURRENT_HISTORY_ID)}}));\n  }catch(err){}\n}\n\nfunction renderHS(f){\n  var r=document.getElementById(\'msHR\'); if(!r) return;\n  var all=sortHistory(getSearchHistory()); var kw=String(f||\'\').trim();\n  var lst = kw ? all.filter(function(h){ return (h.query||\'\').includes(kw)||(h.snippet||\'\').includes(kw)||(h.title||\'\').includes(kw); }) : all;\n  if(!lst.length){ r.innerHTML=\'<div class=\"himt\">找不到符合的對話紀錄</div>\'; return; }\n  r.innerHTML = lst.map(function(h){ return \'<div class=\"hiitem\" data-hid=\"\'+e(h.id)+\'\"><div class=\"hiil\"><span class=\"hiic\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span><div><div class=\"hiit\">\'+e(h.title||h.query)+\'</div><div class=\"hiis\">\'+e(h.snippet||\'搜尋紀錄\')+\'</div></div></div></div>\'; }).join(\'\');\n}\n\nfunction sendEvent(payload){\n  console.log(\'[Momentry Event]\', payload);\n  if(!EVENT_ENDPOINT) return Promise.resolve({mock:true});\n  return fetch(EVENT_ENDPOINT,{method:\'POST\',headers:{\'Content-Type\':\'application/json\'},body:JSON.stringify(payload)}).catch(function(err){ console.warn(\'Event 送出失敗：\', err); });\n}\nfunction renderFinderRows(){\n  return \'\';\n}\n\n// ====== 映射单个 moment 到卡片数据 ======\nfunction mapMomentToCard(moment){\n  var momentId = moment.moment_id || moment.chunk_id || moment.identity_id || \'\';\n  var videoId  = moment.video_id || moment.file_uuid || \'\';\n\n  var tStart = Number(moment.t_start || moment.start_time || 0);\n  var tEnd   = Number(moment.t_end || moment.end_time || 0);\n  if(!tEnd || tEnd <= tStart) tEnd = tStart + 10;\n\n  var title =\n    moment.title ||\n    moment.name ||\n    moment.type ||\n    \'Search Result\';\n\n  var snippet =\n    moment.snippet ||\n    moment.text ||\n    moment.text_content ||\n    \'\';\n\n  var query = LAST_QUERY || \'\';\n\n  // 使用 chunk 的 start_frame，如果没有则用 tStart * FPS 计算\n  var FPS = 24;\n  var frameStart = moment.start_frame !== undefined\n    ? moment.start_frame\n    : Math.max(0, Math.round(tStart * FPS));\n\n  var detailParams = {\n    q: query,\n    query: query,\n    restore: 1,\n    moment_id: momentId,\n    video_id: videoId,\n    t_start: tStart,\n    t_end: tEnd,\n    title: title,\n    snippet: snippet,\n    video_url: \'\'\n  };\n\n  return {\n    id: momentId || (videoId + \'_\' + tStart),\n    momentId: momentId,\n    videoId: videoId,\n    type: \'video\',\n    title: title,\n    name: title,\n    snippet: snippet,\n    desc: snippet,\n    url:\n      \'/wp-json/momentry/v1/media?uuid=\'\n      + encodeURIComponent(videoId)\n      + \'&type=video\'\n      + \'&start_time=\' + encodeURIComponent(tStart)\n      + \'&end_time=\' + encodeURIComponent(tEnd),\n    videoUrl:\n      \'/wp-json/momentry/v1/media?uuid=\'\n      + encodeURIComponent(videoId)\n      + \'&type=video\'\n      + \'&start_time=\' + encodeURIComponent(tStart)\n      + \'&end_time=\' + encodeURIComponent(tEnd),\n    thumbnailUrl: buildThumbUrl(videoId, frameStart),\n    tStart: tStart,\n    tEnd: tEnd,\n    score: typeof moment.score === \'number\' ? moment.score : null,\n    date: \'\',\n    path: \'\',\n    duration: formatDuration(tEnd - tStart),\n    size: \'\',\n    pageUrl: buildQueryUrl(DETAIL_VIEW_URL, detailParams),\n    detailUrl: buildQueryUrl(DETAIL_VIEW_URL, detailParams)\n  };\n}\n					\nfunction mapResultsToCards(results){\n  var seen = {};\n\n  return (results || [])\n    .filter(function(moment){\n      var videoId = moment.video_id || moment.file_uuid || \'\';\n      var start = Number(moment.t_start || moment.start_time || 0).toFixed(1);\n      var name = moment.name || moment.identity_id || \'\';\n      var key = videoId + \'|\' + name + \'|\' + start;\n\n      if (seen[key]) return false;\n      seen[key] = true;\n      return true;\n    })\n    .map(function(moment){\n      return mapMomentToCard(moment);\n    });\n}\nfunction rebuildCardMap(cards){ CM={}; (cards||[]).forEach(function(c){ CM[c.id]=c; }); }\nfunction mergeCardsStore(oldCards, newCards){ var map={}; (oldCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); (newCards||[]).forEach(function(c){ if(c&&c.id) map[c.id]=c; }); return Object.keys(map).map(function(k){ return map[k]; }); }\n\nfunction fetchSearchApi(query){\n  var mode = CURRENT_SEARCH_MODE || \'keyword\';\n\n  return fetch(\'/wp-json/momentry/v1/search-proxy\', {\n    method: \'POST\',\n    headers: {\n      \'Content-Type\': \'application/json\'\n    },\n    body: JSON.stringify({\n      mode: mode,\n      query: query\n    })\n  }).then(function(res){\n    if(!res.ok) throw new Error(\'HTTP \' + res.status);\n    return res.json();\n  });\n}\n\nfunction userMsg(t){ hideEmptyState(); var d=document.createElement(\'div\'); d.className=\'mu\'; d.innerHTML=\'<div class=\"mub\">\'+e(t)+\'</div>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction dateMsg(){ var d=document.createElement(\'div\'); d.className=\'mtime\'; d.textContent=todayLabel(); document.getElementById(\'msChat\').appendChild(d); }\nfunction showL(){ hideL(); var d=document.createElement(\'div\'); d.id=\'msLD\'; d.className=\'ldots\'; d.innerHTML=\'<span></span><span></span><span></span>\'; document.getElementById(\'msChat\').appendChild(d); sb(); }\nfunction hideL(){ var x=document.getElementById(\'msLD\'); if(x)x.remove(); }\nfunction aiTextMsg(text){ var w=document.createElement(\'div\'); w.className=\'maiw\'; w.innerHTML=\'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+text.replace(/\\n/g,\'<br>\')+\'</p></div>\'; document.getElementById(\'msChat\').appendChild(w); sb(); }\n\nfunction arrows(sid,lid,rid){\n  var sc=document.getElementById(sid), lb=document.getElementById(lid), rb=document.getElementById(rid); if(!sc||!lb||!rb) return;\n  function u(){ lb.classList.toggle(\'on\',sc.scrollLeft>2); rb.classList.toggle(\'on\',sc.scrollLeft<sc.scrollWidth-sc.clientWidth-2); }\n  sc.addEventListener(\'scroll\',u,{passive:true}); if(window.ResizeObserver) new ResizeObserver(u).observe(sc); setTimeout(u,120);\n  lb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:-220,behavior:\'smooth\'}); };\n  rb.onclick=function(ev){ if(ev) ev.preventDefault(); sc.scrollBy({left:220,behavior:\'smooth\'}); };\n}\n\nfunction bcard(c){\n  var isv = c.type === \'video\';\n  var snippetLine = c.snippet ? \'<div>\'+e(c.snippet.length>120 ? c.snippet.substring(0,120)+\'…\' : c.snippet)+\'</div>\' : \'\';\n  var timeLine = \'<div>\'+e(formatDuration(c.tStart))+\' – \'+e(formatDuration(c.tEnd))+\'</div>\';\n  var scoreLine = (typeof c.score === \'number\') ? \'<div>score \'+e(c.score.toFixed(2))+\'</div>\' : \'\';\n  var viewBtn = \'\';\n  var th;\n  if(isv){\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.thumbnailUrl)+\'\" alt=\"\'+e(c.title)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+(c.duration ? \'<div class=\"cdur\">\'+e(c.duration)+\'</div>\' : \'\')+viewBtn;\n  } else {\n    th = \'<div class=\"cthumb-loader\"></div><img src=\"\'+e(c.url)+\'\" alt=\"\'+e(c.name)+\'\" loading=\"lazy\" style=\"width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;\" onload=\"var _l=this.parentNode&&this.parentNode.querySelector(\\\'.cthumb-loader\\\');if(_l)_l.style.display=\\\'none\\\';\"><div class=\"cplay\"><div class=\"cplayicon\"><svg viewBox=\"0 0 12 14\"><path d=\"M1 1.5L11 7L1 12.5V1.5Z\"/></svg></div></div>\'+viewBtn;\n  }\n  return \'<div class=\"card\" data-id=\"\'+c.id+\'\" data-url=\"\'+e(c.url)+\'\" data-thumb=\"\'+e(c.thumbnailUrl)+\'\"><div class=\"cthumb\'+(isv ? \' isv\' : \'\')+\'\">\'+th+\'</div><div class=\"cbody\"><div class=\"cname\">\'+e(c.title||c.name)+\'</div><div class=\"cmeta\">\'+snippetLine+timeLine+scoreLine+\'</div></div></div>\';\n}\n\nfunction bindStripCardInteractions(stripEl){\n  if(!stripEl) return;\n  var activePreviewVideo = null;\n  stripEl.querySelectorAll(\'.card\').forEach(function(card){\n    if(card.dataset.bound === \'1\') return; card.dataset.bound = \'1\';\n    var thumb = card.querySelector(\'.cthumb\'); if(!thumb || !thumb.classList.contains(\'isv\')) return;\n    var cardData = CM[card.dataset.id] || {}; var clip = normalizeClipTimes(cardData.tStart, cardData.tEnd);\n    var hoverStart = Number(clip.start || 0), hoverEnd = Number(clip.end || 0);\n    var hoverTimer = null, vid = null;\n    function getOrCreateVideo(){\n      if(vid) return vid;\n      vid = document.createElement(\'video\'); vid.src = card.dataset.url || (cardData.url || \'\');\n      vid.muted = true; vid.playsInline = true; vid.preload = \'metadata\';\n      vid.style.cssText = \'width:100%;height:100%;object-fit:cover;display:block;border:none;max-width:none;position:absolute;inset:0;\';\n      vid.addEventListener(\'timeupdate\', function(){ if(hoverEnd > hoverStart && vid.currentTime >= hoverEnd){ vid.pause(); try{ vid.currentTime = hoverStart; }catch(err){} } });\n      return vid;\n    }\n    card.addEventListener(\'mouseenter\', function(){\n      hoverTimer = setTimeout(function(){\n        var v = getOrCreateVideo(); if(!v) return;\n        if(!thumb.contains(v)) thumb.appendChild(v); v.style.display = \'block\';\n        if(activePreviewVideo && activePreviewVideo !== v){ try{ activePreviewVideo.pause(); activePreviewVideo.style.display = \'none\'; }catch(err){} }\n        try{ v.currentTime = hoverStart; }catch(err){}\n        v.play().then(function(){ activePreviewVideo = v; }).catch(function(){});\n      }, 150);\n    }, false);\n    card.addEventListener(\'mouseleave\', function(){\n      if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer = null; }\n      if(vid){ try{ vid.pause(); }catch(err){} try{ vid.currentTime = hoverStart; }catch(err){} vid.style.display = \'none\'; }\n      if(activePreviewVideo === vid) activePreviewVideo = null;\n    }, false);\n  });\n}\n\nfunction rebindAllCardEvents(){\n  var chat=document.getElementById(\'msChat\'); if(!chat) return;\n  chat.querySelectorAll(\'.cards-sc\').forEach(function(sc, idx){\n    var sid = sc.id; if(!sid) return; var wrap = sc.closest(\'.cards-strip\'); if(!wrap) return;\n    var lb = wrap.querySelector(\'.arrl\'), rb = wrap.querySelector(\'.arrr\'); if(!lb || !rb) return;\n    if(!lb.id) lb.id = \'restore_al_\'+idx+\'_\'+sid; if(!rb.id) rb.id = \'restore_ar_\'+idx+\'_\'+sid;\n    arrows(sid, lb.id, rb.id); bindStripCardInteractions(sc);\n  });\n}\n\nfunction aiMsg(text, cards, mid, query){\n  mid = mid || \'m\' + Date.now();\n  var w=document.createElement(\'div\'); w.className=\'maiw\'; w.dataset.mid=mid;\n  var proc = text.replace(/\\n\\n/g,\'</p><p style=\"margin-bottom:6px;\">\').replace(/\\n/g,\'<br>\');\n  if(cards && cards.length){\n    var resultUrl = FULL_VIEW_URL ? FULL_VIEW_URL+\'?q=\'+encodeURIComponent(query||\'\') : \'\';\n    var fvBtn = \'<div style=\"margin:8px 0 12px;\"><a class=\"fullview-btn\"\'+(resultUrl ? \' href=\"\'+e(resultUrl)+\'\" data-query=\"\'+e(query||\'\')+\'\"\' : \' href=\"#\" onclick=\"event.preventDefault();\"\')+\'>瀏覽完整結果</a></div>\';\n    var sid=\'sc\'+mid, lid=\'al\'+mid, rid=\'ar\'+mid;\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\'+fvBtn+\'<div class=\"cards-out\"><div class=\"cards-strip\"><button class=\"arr arrl\" id=\"\'+lid+\'\">&#8249;</button><div class=\"cards-sc\" id=\"\'+sid+\'\">\'+cards.map(bcard).join(\'\')+\'</div><button class=\"arr arrr\" id=\"\'+rid+\'\">&#8250;</button></div></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n    setTimeout(function(){ arrows(sid,lid,rid); var stripEl=document.getElementById(sid); if(!stripEl) return; bindStripCardInteractions(stripEl); },100);\n  } else {\n    w.innerHTML = \'<div class=\"mait\"><p style=\"margin-bottom:6px;\">\'+proc+\'</p></div>\';\n    document.getElementById(\'msChat\').appendChild(w);\n  }\n  sb();\n}\n\nfunction renderSearchSuccess(query, cards){ aiMsg(\'找到 \'+cards.length+\' 個與「\'+e(query)+\'」相關的片段，點擊可預覽。\', cards, \'m\'+Date.now(), query); }\nfunction renderSearchEmpty(query){ aiTextMsg(\'找不到「\'+e(query)+\'」的相關片段，換個關鍵字試試看。\'); }\nfunction renderSearchError(){ aiTextMsg(\'搜尋時發生問題，請稍後再試。\'); }\n\nfunction send(t){\n  if(!t.trim() || loading) return;\n  loading = true; LAST_QUERY = t; userMsg(t); showL();\n  sendEvent({event_type:\'search\', query:t, moment_id:\'\', video_id:\'\', t_start:0, timestamp:nowISO()});\n  fetchSearchApi(t)\n    .then(function(res){\n      hideL(); loading = false;\n      var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results);\n      if(CURRENT_HISTORY_ID && !SHOULD_SAVE_HISTORY) LAST_CARDS = mergeCardsStore(LAST_CARDS, cards);\n      else LAST_CARDS = cards.slice();\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(t, cards); else renderSearchEmpty(t);\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    })\n    .catch(function(err){\n      hideL(); loading = false; console.error(err); renderSearchError();\n      if(SHOULD_SAVE_HISTORY || !CURRENT_HISTORY_ID){ setTimeout(function(){ upsertSearchHistory(t); SHOULD_SAVE_HISTORY = false; },80); }\n      else { setTimeout(function(){ persistCurrentHistoryView(); },80); }\n    });\n}\n\nfunction restoreHistoryByResearch(picked){\n  if(!picked || !picked.query) return;\n  var chatEl=document.getElementById(\'msChat\'); if(chatEl) chatEl.innerHTML=\'\';\n  dateMsg(); userMsg(picked.query); showL();\n  LAST_QUERY = picked.query || \'\'; CURRENT_HISTORY_ID = picked.id || null; SHOULD_SAVE_HISTORY = false;\n  fetchSearchApi(picked.query)\n    .then(function(res){\n      hideL(); var results=Array.isArray(res.results) ? res.results : [];\n      var cards=mapResultsToCards(results); LAST_CARDS = cards.slice(); rebuildCardMap(cards);\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(Array.isArray(LAST_CARDS) ? LAST_CARDS : []));\n      if(cards.length > 0) renderSearchSuccess(picked.query, cards); else renderSearchEmpty(picked.query);\n      var newChatHtml = chatEl ? chatEl.innerHTML : \'\';\n      updateHistoryRecordById(picked.id, {chatHtml:newChatHtml, cardsData:cards.slice(), query:picked.query||\'\'});\n      sessionStorage.setItem(\'ms_chat_html\', newChatHtml);\n      sessionStorage.setItem(\'ms_last_query\', picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id));\n    })\n    .catch(function(err){ hideL(); LAST_CARDS=[]; CM={}; renderSearchError(); });\n}\n\nfunction openMM(c){\n  var ma=document.getElementById(\'mmMA\'), ia=document.getElementById(\'mmIA\'); if(!ma||!ia) return;\n  var clip=normalizeClipTimes(c.tStart, c.tEnd); var startAt=clip.start, endAt=clip.end;\n  if(c.type===\'video\') ma.innerHTML=\'<video id=\"mmVideo\" src=\"\'+c.url+\'\" controls preload=\"auto\" playsinline style=\"width:100%;display:block;background:#000;\"></video>\';\n  else ma.innerHTML=\'<img src=\"\'+c.url+\'\" alt=\"\'+e(c.name)+\'\" style=\"max-width:100%;object-fit:contain;display:block;\">\';\n  var badge = c.type===\'video\' ? \'<span class=\"mmbadge vi\">影片</span>\' : \'<span class=\"mmbadge ph\">照片</span>\';\n  var rows=\'\';\n  function row(label, value){ if(value===undefined||value===null||value===\'\'||value===\'—\') return \'\'; return \'<div class=\"mmrow\"><span class=\"mmkey\">\'+label+\'</span><span class=\"mmval\">\'+e(value)+\'</span></div>\'; }\n  rows += row(\'moment_id\', c.momentId); rows += row(\'video_id\', c.videoId);\n  rows += row(\'t_start\', formatDuration(startAt)); rows += row(\'t_end\', formatDuration(endAt));\n  if(typeof c.score === \'number\') rows += row(\'score\', c.score.toFixed(2));\n  rows += row(\'date\', c.date); rows += row(\'path\', c.path); rows += row(\'duration\', c.duration);\n  ia.innerHTML = \'<div class=\"mmttl\">\'+e(c.title||c.name)+\' \'+badge+\'</div><div class=\"mmgrid\">\'+rows+\'</div>\'+(c.desc ? \'<div class=\"mmdesc\">\'+e(c.desc)+\'</div>\' : \'\')+\'<div class=\"mmacts\"><button class=\"mmbtn pri\" id=\"mmDBtn\">前往詳情頁</button><button class=\"mmbtn sec\" id=\"mmCBtn\">關閉</button></div>\';\n  var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.add(\'on\');\n if(c.type===\'video\'){\n  var video = document.getElementById(\'mmVideo\');\n\n  if(video){\n    video.addEventListener(\'canplay\', function(){\n      video.play().catch(function(err){\n        console.warn(\'video play failed:\', err);\n      });\n    }, {once:true});\n  }\n}\n  function cls(){ var modal=document.getElementById(\'msMM\'); if(modal) modal.classList.remove(\'on\'); var v=ma.querySelector(\'video\'); if(v) v.pause(); }\n  document.getElementById(\'mmCBtn\').onclick = cls;\n  document.getElementById(\'mmDBtn\').onclick = function(){ if(c.detailUrl) window.location.href=c.detailUrl; else alert(\'完整資料頁面 URL 尚未設定。\'); };\n}\n\n/* ══════════════════════════════════════════════\n   書籤功能：高亮 + 捲動\n   ══════════════════════════════════════════════ */\n\nvar selPop=document.getElementById(\'msSelBKPop\'), pendingSel=\'\', pendingRange=null;\n\nfunction renderBK(){\n  var l=document.getElementById(\'msBKL\'); if(!l) return;\n  if(!BKS.length){\n    l.innerHTML=\'<div class=\"bkempty\">還沒有書籤，選取對話中的文字就能加進來。</div>\';\n    return;\n  }\n  l.innerHTML = BKS.map(function(b){\n    return \'<div class=\"bkrow\" data-bkid=\"\'+b.id+\'\" onclick=\"window.__msBkScrollTo(\\\'\'+b.id+\'\\\')\" style=\"cursor:pointer;\">\'\n      +\'<div class=\"bkchip\">\'+ICO_BK_FILLED+e(b.label)+\'</div>\'\n      +\'<button class=\"bkrm\" data-bkid=\"\'+b.id+\'\" title=\"移除\">✕</button>\'\n      +\'</div>\';\n  }).join(\'\');\n}\n\n/* 捲動到對應高亮 span 並閃爍 */\nwindow.__msBkScrollTo = function(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var el = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\'); if(!el) return;\n  /* 關閉書籤面板 */\n  var bk = document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\');\n  /* 捲動 */\n  el.scrollIntoView({behavior:\'smooth\', block:\'center\'});\n  /* 閃爍效果 */\n  el.classList.add(\'ms-bk-pulse\');\n  setTimeout(function(){ el.classList.remove(\'ms-bk-pulse\'); }, 700);\n};\n\n/* 移除書籤時同步移除 DOM 高亮 */\nfunction removeBkHighlight(bkId){\n  var chatEl = document.getElementById(\'msChat\'); if(!chatEl) return;\n  var markEl = chatEl.querySelector(\'.ms-bk-highlight[data-bkid=\"\'+bkId+\'\"]\');\n  if(markEl){\n    var parent = markEl.parentNode;\n    while(markEl.firstChild) parent.insertBefore(markEl.firstChild, markEl);\n    parent.removeChild(markEl);\n  }\n}\n\ndocument.addEventListener(\'mouseup\',function(ev){\n  setTimeout(function(){\n    if(!selPop) return; if(ev.target.closest(\'#msSelBKPop\')) return;\n    var sel=window.getSelection(), txt=sel?sel.toString().trim():\'\';\n    var chatEl=document.getElementById(\'msChat\'), inChat=false;\n    if(sel&&sel.rangeCount>0){\n      var range=sel.getRangeAt(0);\n      inChat=chatEl&&chatEl.contains(range.commonAncestorContainer);\n    }\n    if(txt&&inChat){\n      pendingSel=txt;\n      /* 儲存 range 供加書籤時使用 */\n      pendingRange = sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;\n      var rect=sel.getRangeAt(0).getBoundingClientRect(), popW=120;\n      var left=rect.left+rect.width/2-popW/2, top=rect.top-44+window.scrollY;\n      left=Math.max(8,Math.min(left,window.innerWidth-popW-8));\n      selPop.style.left=left+\'px\'; selPop.style.top=top+\'px\'; selPop.classList.add(\'on\');\n    } else { selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n  },10);\n});\n\nif(selPop){\n  selPop.addEventListener(\'mousedown\',function(ev){ ev.preventDefault(); });\n  selPop.addEventListener(\'click\',function(){\n    var kw=pendingSel; if(!kw){ selPop.classList.remove(\'on\'); return; }\n    if(!BKS.some(function(b){ return b.label===kw; })){\n      var bkId = \'bk\'+(++bkN);\n      BKS.push({id:bkId, label:kw});\n\n      /* 在對話中高亮選取的文字 */\n      if(pendingRange){\n        try{\n          var mark = document.createElement(\'span\');\n          mark.className = \'ms-bk-highlight\';\n          mark.dataset.bkid = bkId;\n          pendingRange.surroundContents(mark);\n        }catch(err){\n          /* surroundContents 跨節點時會失敗，fallback: 不高亮但書籤仍加入 */\n          console.warn(\'bookmark highlight surroundContents failed:\', err);\n        }\n      }\n    }\n    renderBK(); selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null;\n    if(window.getSelection) window.getSelection().removeAllRanges();\n  });\n}\n\ndocument.addEventListener(\'mousedown\',function(ev){\n  if(selPop&&!ev.target.closest(\'#msSelBKPop\')){ selPop.classList.remove(\'on\'); pendingSel=\'\'; pendingRange=null; }\n});\nrenderBK();\n\n/* ══════════════════════════════════════════════\n   其他互動事件\n   ══════════════════════════════════════════════ */\n\ndocument.addEventListener(\'click\',function(ev){\n  var fullBtn=ev.target.closest(\'.fullview-btn\'); var cardBtn=ev.target.closest(\'.cviewbtn\');\n  if(fullBtn){ saveChatState(fullBtn.getAttribute(\'data-query\')||LAST_QUERY||\'\'); return; }\n  if(cardBtn){ saveChatState(LAST_QUERY||\'\'); return; }\n});\n\ndocument.addEventListener(\'click\',function(ev){\n  if(ev.target.closest(\'.arr\')||ev.target.closest(\'.cviewbtn\')) return;\n  var card=ev.target.closest(\'.card\'); if(!card) return;\n  var c=CM[card.dataset.id]; if(!c) return;\n  sendEvent({event_type:\'play\',query:LAST_QUERY||\'\',moment_id:c.momentId||\'\',video_id:c.videoId||\'\',t_start:Number(c.tStart||0),t_end:Number(c.tEnd||0),timestamp:nowISO()});\n  openMM(c);\n});\n\nvar modalRoot=document.getElementById(\'msMM\');\nif(modalRoot){ modalRoot.addEventListener(\'click\',function(ev){ if(ev.target===this){ this.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); } }); }\n\n/* 移除書籤 */\ndocument.addEventListener(\'click\',function(ev){\n  var rm=ev.target.closest(\'.bkrm\'); if(!rm) return;\n  ev.stopPropagation(); /* 避免觸發 bkrow 的 scroll onclick */\n  var bkId = rm.dataset.bkid;\n  var idx=BKS.findIndex(function(b){ return b.id===bkId; });\n  if(idx>=0){\n    BKS.splice(idx,1);\n    removeBkHighlight(bkId);\n  }\n  renderBK();\n});\n\nvar msBKBtn=document.getElementById(\'msBKBtn\');\nif(msBKBtn){ msBKBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); renderBK(); var bk=document.getElementById(\'msBK\'),ho=document.getElementById(\'msHO\'); if(bk) bk.classList.toggle(\'on\'); if(ho) ho.classList.remove(\'on\'); }); }\nvar msBKX=document.getElementById(\'msBKX\');\nif(msBKX){ msBKX.addEventListener(\'click\',function(){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); }); }\ndocument.addEventListener(\'click\',function(ev){ if(!ev.target.closest(\'#msBK\')&&!ev.target.closest(\'#msBKBtn\')){ var bk=document.getElementById(\'msBK\'); if(bk) bk.classList.remove(\'on\'); } });\n\nvar msHSBtn=document.getElementById(\'msHSBtn\');\nif(msHSBtn){ msHSBtn.addEventListener(\'click\',function(ev){ ev.stopPropagation(); var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'); if(ho) ho.classList.add(\'on\'); if(bk) bk.classList.remove(\'on\'); renderHS(\'\'); setTimeout(function(){ var hi=document.getElementById(\'msHI\'); if(hi) hi.focus(); },100); }); }\nvar msHO=document.getElementById(\'msHO\'); if(msHO){ msHO.addEventListener(\'click\',function(ev){ if(ev.target===this) this.classList.remove(\'on\'); }); }\nvar msHI=document.getElementById(\'msHI\'); if(msHI){ msHI.addEventListener(\'input\',function(){ renderHS(this.value.trim()); }); }\n\nwindow.addEventListener(\'ms-history-updated\',function(ev){ if(ev&&ev.detail&&typeof ev.detail.selectedId !== \'undefined\') CURRENT_HISTORY_ID = ev.detail.selectedId ? ev.detail.selectedId : null; var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\'); }); \n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n========================================================= */\n/* =========================================================\n   ✅ 给左边 sidebar 点击历史记录使用\n   不刷新整页，也能恢复右边 #msChat 内容\n   + 恢复后重新同步左边主题颜色\n========================================================= */\nwindow.MS_RESTORE_HISTORY_FROM_SIDEBAR = function(picked){\n  try {\n    if (!picked) return;\n\n    switchToSearch();\n\n    var chatEl = document.getElementById(\'msChat\');\n    var inpEl  = document.getElementById(\'msInp\');\n\n    CURRENT_HISTORY_ID = picked.id || null;\n    LAST_QUERY = picked.query || \'\';\n    SHOULD_SAVE_HISTORY = false;\n\n    if (inpEl) {\n      inpEl.value = picked.query || \'\';\n    }\n\n    if (chatEl) {\n      if (picked.chatHtml && String(picked.chatHtml).trim()) {\n        chatEl.innerHTML = picked.chatHtml;\n      } else {\n        chatEl.innerHTML = \'\';\n        showEmptyState();\n      }\n    }\n\n    LAST_CARDS = Array.isArray(picked.cardsData) ? picked.cardsData.slice() : [];\n    rebuildCardMap(LAST_CARDS);\n\n    try {\n      sessionStorage.setItem(\'ms_chat_html\', picked.chatHtml || \'\');\n      sessionStorage.setItem(\'ms_last_query\', picked.query || \'\');\n      sessionStorage.setItem(\'ms_selected_history_id\', String(picked.id || \'\'));\n      sessionStorage.setItem(\'ms_cards_data\', JSON.stringify(LAST_CARDS));\n      sessionStorage.setItem(\'ms_current_view\', \'search\');\n    } catch (err) {}\n\n    /* ✅ 重点：恢复历史后，重新同步左侧主题色 */\n    function forceSyncThemeAfterRestore() {\n      try {\n        applySyncedTheme();\n\n        var root = document.getElementById(\'msP\');\n        if (!root) return;\n\n        var css = getComputedStyle(document.documentElement);\n\n        var soft   = css.getPropertyValue(\'--ms-accent-soft\').trim();\n        var text   = css.getPropertyValue(\'--ms-accent-text\').trim();\n        var accent = css.getPropertyValue(\'--ms-accent\').trim();\n\n        if (soft)   root.style.setProperty(\'--sync-accent-light\', soft);\n        if (text)   root.style.setProperty(\'--sync-accent-dark\', text);\n        if (accent) root.style.setProperty(\'--sync-accent\', accent);\n\n      } catch (err) {\n        console.warn(\'forceSyncThemeAfterRestore failed\', err);\n      }\n    }\n\n    setTimeout(function(){\n      rebindAllCardEvents();\n      forceSyncThemeAfterRestore();\n      sb();\n    }, 80);\n\n    setTimeout(forceSyncThemeAfterRestore, 200);\n    setTimeout(forceSyncThemeAfterRestore, 500);\n\n  } catch (err) {\n    console.warn(\'MS_RESTORE_HISTORY_FROM_SIDEBAR failed\', err);\n  }\n};\nwindow.addEventListener(\'ms-history-cleared\', function(ev){\n  try{\n    var deletedId = ev&&ev.detail ? String(ev.detail.deletedId||\'\') : \'\';\n    var currentId = CURRENT_HISTORY_ID ? String(CURRENT_HISTORY_ID) : \'\';\n    var selectedId = sessionStorage.getItem(\'ms_selected_history_id\') || \'\';\n    if(!deletedId||deletedId===currentId||deletedId===selectedId){\n      CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\';\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n      sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n      /* 清除書籤高亮與清單 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n    }\n    var hi=document.getElementById(\'msHI\'); renderHS(hi?hi.value.trim():\'\');\n  }catch(err){ console.warn(\'handle ms-history-cleared failed\', err); }\n});\n\nvar msHR=document.getElementById(\'msHR\');\nif(msHR){\n  msHR.addEventListener(\'click\',function(ev){\n    var item=ev.target.closest(\'.hiitem\'); if(!item) return;\n    var picked=getHistoryById(item.getAttribute(\'data-hid\')); if(!picked) return;\n    saveCurrentViewToCurrentHistory();\n    try{\n      var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n      if(chatEl) chatEl.innerHTML=picked.chatHtml||\'\'; if(inpEl) inpEl.value=picked.query||\'\';\n      LAST_CARDS=Array.isArray(picked.cardsData)?picked.cardsData.slice():[];\n      rebuildCardMap(LAST_CARDS);\n      sessionStorage.setItem(\'ms_chat_html\',picked.chatHtml||\'\');\n      sessionStorage.setItem(\'ms_last_query\',picked.query||\'\');\n      sessionStorage.setItem(\'ms_selected_history_id\',String(picked.id));\n      sessionStorage.setItem(\'ms_cards_data\',JSON.stringify(Array.isArray(LAST_CARDS)?LAST_CARDS:[]));\n      CURRENT_HISTORY_ID=picked.id; LAST_QUERY=picked.query||\'\'; SHOULD_SAVE_HISTORY=false;\n    }catch(err){ console.warn(\'history restore failed\',err); }\n    var ho=document.getElementById(\'msHO\'); if(ho) ho.classList.remove(\'on\');\n    switchToSearch();\n    if((!picked.chatHtml||!String(picked.chatHtml).trim())&&(!picked.cardsData||!Array.isArray(picked.cardsData)||!picked.cardsData.length)) restoreHistoryByResearch(picked);\n    else setTimeout(function(){ rebindAllCardEvents(); },80);\n  });\n}\n\nvar ctxId=null;\ndocument.addEventListener(\'click\',function(ev){\n  var dot=ev.target.closest(\'.ms-history-menu\');\n  if(!dot){ if(!ev.target.closest(\'#msCM\')){ var cm=document.getElementById(\'msCM\'); if(cm) cm.classList.remove(\'on\'); } return; }\n  ev.stopPropagation();\n  var item=dot.closest(\'.ms-history-item\'); ctxId=item?item.dataset.id:null;\n  var r=dot.getBoundingClientRect(),menu=document.getElementById(\'msCM\'); if(!menu) return;\n  menu.style.top=(r.bottom+6)+\'px\'; menu.style.left=Math.max(6,r.left-140)+\'px\'; menu.classList.add(\'on\');\n});\n\nvar msCM=document.getElementById(\'msCM\');\nif(msCM){\n  msCM.addEventListener(\'click\',function(ev){\n    var it=ev.target.closest(\'.ci\'); if(!it) return;\n    var act=it.dataset.a, items=getSearchHistory();\n    var idx=items.findIndex(function(x){ return String(x.id)===String(ctxId); });\n    if(idx===-1){ msCM.classList.remove(\'on\'); return; }\n    if(act===\'delete\'&&ctxId){\n      var deletingId=String(ctxId);\n      items.splice(idx,1); items=sortHistory(items); saveSearchHistory(items);\n      if(String(CURRENT_HISTORY_ID)===deletingId||!items.length){\n        CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n        sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_chat_html\');\n        sessionStorage.removeItem(\'ms_last_query\'); sessionStorage.removeItem(\'ms_cards_data\');\n        var chatEl=document.getElementById(\'msChat\'),inpEl=document.getElementById(\'msInp\');\n        if(chatEl) chatEl.innerHTML=\'\'; if(inpEl) inpEl.value=\'\'; showEmptyState();\n      }\n      window.dispatchEvent(new CustomEvent(\'ms-history-cleared\',{detail:{deletedId:deletingId}}));\n    } else if(act===\'rename\'&&ctxId){\n      var n=prompt(\'新名稱：\',items[idx].title||items[idx].query||\'\');\n      if(n!==null){ n=String(n||\'\').trim(); items[idx].title=n||items[idx].query||\'Untitled\'; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id; }\n    } else if(act===\'pin\'&&ctxId){\n      items[idx].pinned=!items[idx].pinned; items[idx].updatedAt=new Date().toISOString(); saveSearchHistory(sortHistory(items)); CURRENT_HISTORY_ID=items[idx].id;\n    }\n    msCM.classList.remove(\'on\');\n    window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:CURRENT_HISTORY_ID?String(CURRENT_HISTORY_ID):\'\'}}));\n  });\n}\n\ndocument.addEventListener(\'keydown\',function(ev){\n  if(ev.key!==\'Escape\') return;\n  var ho=document.getElementById(\'msHO\'),bk=document.getElementById(\'msBK\'),cm=document.getElementById(\'msCM\');\n  if(ho) ho.classList.remove(\'on\'); if(bk) bk.classList.remove(\'on\'); if(cm) cm.classList.remove(\'on\');\n  if(selPop) selPop.classList.remove(\'on\');\n  var m=document.getElementById(\'msMM\');\n  if(m&&m.classList.contains(\'on\')){ m.classList.remove(\'on\'); var v=document.querySelector(\'#mmMA video\'); if(v) v.pause(); }\n});\n\n\n/* ── Search mode selector: auto insert into existing search bar ── */\nfunction ensureSearchModeSelector(){\n  var wrap = document.querySelector(\'#msP .iwrap\');\n  var inputEl = document.getElementById(\'msInp\');\n  var micEl = document.querySelector(\'#msP .micbtn\');\n\n  if(!wrap || !inputEl) return;\n  if(document.getElementById(\'msChatModeWrap\')) return;\n\n  var holder = document.createElement(\'div\');\n  holder.className = \'ms-chat-mode-wrap\';\n  holder.id = \'msChatModeWrap\';\n  holder.innerHTML =\n    \'<button class=\"ms-chat-mode-btn\" id=\"msChatModeBtn\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\' +\n      \'<span id=\"msChatModeLabel\">Keyword</span>\' +\n      \'<span class=\"ms-chat-mode-arrow\">⌄</span>\' +\n    \'</button>\' +\n    \'<div class=\"ms-chat-mode-menu\" id=\"msChatModeMenu\" role=\"listbox\" aria-label=\"Search mode\">\' +\n      \'<div class=\"ms-chat-mode-item is-active\" role=\"option\" data-value=\"keyword\" aria-selected=\"true\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 6h16M4 12h10M4 18h7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>Keyword</span>\' +\n      \'</div>\' +\n      \'<div class=\"ms-chat-mode-item\" role=\"option\" data-value=\"semantic\" aria-selected=\"false\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>Semantic</span>\' +\n      \'</div>\' +\n      \'<div class=\"ms-chat-mode-item\" role=\"option\" data-value=\"people\" aria-selected=\"false\">\' +\n        \'<span class=\"ms-chat-mode-item-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"8\" r=\"3.5\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\"></path></svg></span>\' +\n        \'<span>People</span>\' +\n      \'</div>\' +\n    \'</div>\';\n\n  if(micEl) wrap.insertBefore(holder, micEl);\n  else wrap.appendChild(holder);\n}\n\nfunction setChatMode(mode){\n  CURRENT_SEARCH_MODE = mode || \'keyword\';\n\n  var label =\n    CURRENT_SEARCH_MODE === \'semantic\' ? \'Semantic\' :\n    CURRENT_SEARCH_MODE === \'people\' ? \'People\' :\n    \'Keyword\';\n\n  var modeLabel = document.getElementById(\'msChatModeLabel\');\n  var modeMenu = document.getElementById(\'msChatModeMenu\');\n\n  if(modeLabel) modeLabel.textContent = label;\n\n  document.querySelectorAll(\'.ms-chat-mode-item\').forEach(function(item){\n    item.classList.toggle(\'is-active\', item.dataset.value === CURRENT_SEARCH_MODE);\n  });\n\n  if(modeMenu) modeMenu.classList.remove(\'is-open\');\n}\n\nfunction bindSearchModeSelector(){\n  ensureSearchModeSelector();\n\n  var modeBtn = document.getElementById(\'msChatModeBtn\');\n  var modeMenu = document.getElementById(\'msChatModeMenu\');\n\n  if(!modeBtn || !modeMenu || modeBtn.dataset.bound === \'1\') {\n    setChatMode(CURRENT_SEARCH_MODE);\n    return;\n  }\n\n  modeBtn.dataset.bound = \'1\';\n\n  modeBtn.addEventListener(\'click\', function(ev){\n    ev.stopPropagation();\n    modeMenu.classList.toggle(\'is-open\');\n  });\n\n  document.querySelectorAll(\'.ms-chat-mode-item\').forEach(function(item){\n    item.addEventListener(\'click\', function(ev){\n      ev.stopPropagation();\n      setChatMode(item.dataset.value);\n    });\n  });\n\n  document.addEventListener(\'click\', function(){\n    modeMenu.classList.remove(\'is-open\');\n  });\n\n  setChatMode(CURRENT_SEARCH_MODE);\n}\n\nbindSearchModeSelector();\n\nvar inp=document.getElementById(\'msInp\');\nif(inp){\n  var isComposing=false;\n  inp.addEventListener(\'compositionstart\',function(){ isComposing=true; });\n  inp.addEventListener(\'compositionend\',function(){ isComposing=false; });\n  inp.addEventListener(\'keydown\',function(ev){\n    if(isComposing) return;\n    if(ev.key===\'Enter\'&&!ev.shiftKey){\n      ev.preventDefault();\n      var v=inp.value.trim();\n      if(v){ SHOULD_SAVE_HISTORY=SHOULD_SAVE_HISTORY||!CURRENT_HISTORY_ID; send(v); inp.value=\'\'; }\n    }\n  });\n}\n\ndocument.addEventListener(\'DOMContentLoaded\',function(){\n  watchThemeSync();\n\n  document.addEventListener(\'click\', function(ev){\n    var histItem = ev.target.closest(\'.ms-history-item\');\n    if(histItem){ try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){} }\n  });\n\n  var nb=document.getElementById(\'msNewChat\');\n  if(nb){\n    nb.addEventListener(\'click\',function(){\n      window.currentThreadId=null; CURRENT_HISTORY_ID=null; SHOULD_SAVE_HISTORY=true; LAST_CARDS=[]; CM={}; LAST_QUERY=\'\';\n      var chat=document.getElementById(\'msChat\'),inp=document.getElementById(\'msInp\');\n      if(chat) chat.innerHTML=\'\'; if(inp) inp.value=\'\';\n      /* 清除書籤高亮 */\n      BKS=[]; bkN=0; renderBK();\n      showEmptyState();\n      sessionStorage.removeItem(\'ms_chat_html\'); sessionStorage.removeItem(\'ms_last_query\');\n      sessionStorage.removeItem(\'ms_selected_history_id\'); sessionStorage.removeItem(\'ms_cards_data\');\n      window.dispatchEvent(new CustomEvent(\'ms-history-updated\',{detail:{selectedId:\'\'}}));\n      switchToSearch();\n    });\n  }\n\n  try{\n    var savedView = sessionStorage.getItem(\'ms_current_view\');\n    if(savedView === \'searchlab\'){ switchToSearchLab(); } else { switchToSearch(); }\n  }catch(e){ switchToSearch(); }\n\n  var params=new URLSearchParams(window.location.search);\n  var shouldRestore=params.get(\'restore\')===\'1\';\n\n  if(shouldRestore){\n    try{ sessionStorage.setItem(\'ms_current_view\',\'search\'); }catch(e){}\n    switchToSearch();\n    try{\n      var savedHtml=sessionStorage.getItem(\'ms_chat_html\')||\'\';\n      var savedQuery=sessionStorage.getItem(\'ms_last_query\')||\'\';\n      var selectedId=sessionStorage.getItem(\'ms_selected_history_id\')||\'\';\n      var savedCardsRaw=sessionStorage.getItem(\'ms_cards_data\')||\'[]\';\n      var savedCards=[];\n      try{ savedCards=JSON.parse(savedCardsRaw); if(!Array.isArray(savedCards)) savedCards=[]; }catch(err){ savedCards=[]; }\n      var chatEl=document.getElementById(\'msChat\');\n      var restored=selectedId ? getHistoryById(selectedId) : null;\n      CURRENT_HISTORY_ID=selectedId||null; LAST_QUERY=savedQuery||\'\'; SHOULD_SAVE_HISTORY=false;\n      if(chatEl){\n        if(savedHtml) chatEl.innerHTML=savedHtml;\n        else if(restored&&restored.chatHtml) chatEl.innerHTML=restored.chatHtml;\n        else { chatEl.innerHTML=\'\'; showEmptyState(); }\n      }\n      if(savedCards.length){ LAST_CARDS=savedCards.slice(); rebuildCardMap(LAST_CARDS); }\n      else if(restored&&Array.isArray(restored.cardsData)){ LAST_CARDS=restored.cardsData.slice(); rebuildCardMap(LAST_CARDS); }\n      else { LAST_CARDS=[]; CM={}; }\n      setTimeout(function(){ rebindAllCardEvents(); },80);\n    }catch(err){ console.warn(\'restore failed\',err); LAST_CARDS=[]; CM={}; showEmptyState(); }\n    return;\n  }\n\n  var initialQuery=getQueryFromUrl();\n  if(initialQuery){\n    var chat=document.getElementById(\'msChat\'); if(chat) chat.innerHTML=\'\';\n    dateMsg(); SHOULD_SAVE_HISTORY=true; send(initialQuery);\n  } else {\n    SHOULD_SAVE_HISTORY=false; LAST_CARDS=[]; CM={}; showEmptyState();\n  }\n});\n})();\n\n</script>\n  <?php\n});\n','','global',0,10,1,'2026-05-29 04:58:54',1,NULL),
(67,'Momentry API Console [3002]','<p>使用 3002 時，就開啟這個</p>','/**\n * Momentry API Debug Console v9\n * Shortcode: [momentry_api_dashboard_v9]\n *\n * v9 = v8 log system + v9 API templates\n * - 保留 v8：log / renew log / view log / download log / clear log / trace_id / curl preview\n * - 新增 v9：jobs / identities / identity files / identity faces / identity chunks\n * - 新增 variables：FILE_UUID / IDENTITY_UUID / TRACE_ID / QUERY\n */\n\nif (!defined(\'ABSPATH\')) {\n  exit;\n}\n\nadd_action(\'rest_api_init\', function () {\n\n  register_rest_route(\'momentry/v1\', \'/api-test-v9\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_test_proxy_v9\',\n    \'permission_callback\' => function () {\n      return is_user_logged_in();\n    }\n  ]);\n\n  register_rest_route(\'momentry/v1\', \'/api-log-v9\', [\n    \'methods\'  => \'POST\',\n    \'callback\' => \'momentry_api_log_v9\',\n    \'permission_callback\' => function () {\n      return is_user_logged_in();\n    }\n  ]);\n\n});\nfunction momentry_core_request($method, $path, $body = []) {\n\n  global $wpdb;\n\n  $base = \'http://192.168.110.201:3002\';\n\n  $api_key = \'YOUR_API_KEY\';\n\n  $trace_id = \'trc_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n\n  $start = microtime(true);\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => [\n      \'X-API-Key\' => $api_key,\n      \'Accept\' => \'application/json\',\n      \'Content-Type\' => \'application/json\'\n    ]\n  ];\n\n  if(in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'])){\n    $args[\'body\'] = wp_json_encode($body);\n  }\n$res = wp_remote_request(\n  $base . $path,\n  $args\n);\n  $latency = round((microtime(true) - $start) * 1000);\n\n  $http_code = is_wp_error($res)\n    ? 0\n    : wp_remote_retrieve_response_code($res);\n\n  $response_body = is_wp_error($res)\n    ? $res->get_error_message()\n    : wp_remote_retrieve_body($res);\n\n  $wpdb->insert(\n    $wpdb->prefix . \'momentry_api_logs\',\n    [\n      \'trace_id\' => $trace_id,\n      \'user_id\' => get_current_user_id(),\n      \'user_login\' => momentry_user_name_v9(),\n      \'page_source\' => \'Momentry API Console\',\n      \'method\' => $method,\n      \'path\' => $path,\n      \'request_body\' => wp_json_encode($body),\n      \'response_body\' => $response_body,\n      \'http_code\' => $http_code,\n      \'latency_ms\' => $latency,\n      \'success\' => ($http_code >= 200 && $http_code < 300) ? 1 : 0,\n      \'error_message\' => ($http_code >= 400 || $http_code === 0)\n        ? $response_body\n        : null\n    ]\n  );\n\n  return [\n    \'trace_id\' => $trace_id,\n    \'http_code\' => $http_code,\n    \'response_body\' => json_decode($response_body, true)\n  ];\n}\nfunction momentry_log_dir_v9() {\n  $upload = wp_upload_dir();\n  $dir = trailingslashit($upload[\'basedir\']) . \'momentry-api-logs\';\n\n  if (!file_exists($dir)) {\n    wp_mkdir_p($dir);\n  }\n\n  return $dir;\n}\n\nfunction momentry_safe_log_name_v9($name) {\n  $name = sanitize_file_name($name ?: \'momentry-api-debug\');\n  $name = preg_replace(\'/\\.log$/\', \'\', $name);\n  return $name . \'.log\';\n}\n\nfunction momentry_write_log_v9($log_name, $line) {\n  $file = trailingslashit(momentry_log_dir_v9()) . momentry_safe_log_name_v9($log_name);\n  file_put_contents($file, $line . \"\\n\", FILE_APPEND);\n  return $file;\n}\nfunction momentry_trace_id_v9() {\n  return \'trc_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\n\nfunction momentry_user_name_v9() {\n  $u = wp_get_current_user();\n\n  if ($u && $u->exists()) {\n    return $u->display_name;\n  }\n\n  return \'guest\';\n}\n\nfunction momentry_log_level_v9($http_code) {\n  if ($http_code >= 500) return \'ERROR\';\n  if ($http_code >= 400) return \'WARN\';\n  return \'INFO\';\n}\n\nfunction momentry_api_log_v9(WP_REST_Request $request) {\n  $action = sanitize_text_field($request->get_param(\'action\'));\n  $log_name = momentry_safe_log_name_v9($request->get_param(\'log_name\'));\n  $file = trailingslashit(momentry_log_dir_v9()) . $log_name;\n\n  if ($action === \'view\') {\n    return [\n      \'ok\' => true,\n      \'log_name\' => $log_name,\n      \'content\' => file_exists($file) ? file_get_contents($file) : \'\'\n    ];\n  }\n\n  if ($action === \'clear\') {\n    file_put_contents($file, \'\');\n    return [\n      \'ok\' => true,\n      \'message\' => \'Log cleared\',\n      \'log_name\' => $log_name\n    ];\n  }\n\n  return new WP_REST_Response([\n    \'ok\' => false,\n    \'message\' => \'Invalid log action\'\n  ], 400);\n}\n\nfunction momentry_api_test_proxy_v9(WP_REST_Request $request) {\n\n  $base = \'http://192.168.110.201:3002\';\n\n  // TODO: 建議之後移到 wp-config.php，不要長期寫死在頁面 snippet\n  $api_key = \'muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69\';\n\n  $method = strtoupper(sanitize_text_field($request->get_param(\'method\')));\n  $path = $request->get_param(\'path\');\n  $body = $request->get_param(\'body\');\n  $log_name = $request->get_param(\'log_name\') ?: \'momentry-api-debug\';\n  $api_name = sanitize_text_field($request->get_param(\'api_name\') ?: \'Manual API\');\n  $api_group = sanitize_text_field($request->get_param(\'api_group\') ?: \'General\');\n\n  if (!$method) $method = \'GET\';\n\n  if (!$path || strpos($path, \'/\') !== 0) {\n    return new WP_REST_Response([\n      \'ok\' => false,\n      \'message\' => \'Path must start with /\'\n    ], 400);\n  }\n\n  $url = rtrim($base, \'/\') . $path;\n\n  $headers = [\n    \'X-API-Key\' => $api_key,\n    \'Accept\' => \'application/json\',\n    \'User-Agent\' => \'Momentry-DebugConsole/9.0\'\n  ];\n\n  $args = [\n    \'method\' => $method,\n    \'timeout\' => 60,\n    \'headers\' => $headers,\n  ];\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $args[\'headers\'][\'Content-Type\'] = \'application/json\';\n    $args[\'body\'] = wp_json_encode($body ?: []);\n  }\n\n  $timestamp = gmdate(\'Y-m-d\\TH:i:s.v\\Z\');\n  $trace_id = momentry_trace_id_v9();\n\n  $start = microtime(true);\n  $start_time = microtime(true);\n  $response = wp_remote_request($url, $args);\n  $latency_ms = round((microtime(true) - $start) * 1000);\n\n  $pretty_request = wp_json_encode(\n    $body ?: new stdClass(),\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $curl_command = \"curl -i -s -X $method \\\"$url\\\" \\\\\\n-H \\\"X-API-Key: ********\\\" \\\\\\n-H \\\"Accept: application/json\\\"\";\n\n  if (in_array($method, [\'POST\',\'PUT\',\'PATCH\',\'DELETE\'], true)) {\n    $curl_command .= \" \\\\\\n-H \\\"Content-Type: application/json\\\" \\\\\\n-d \'\" . $pretty_request . \"\'\";\n  }\n\n  if (is_wp_error($response)) {\n    $error_message = $response->get_error_message();\n\n    $log_block =\n\"================================================================================\n[$timestamp] [ERROR] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v9\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : NA\nLatency     : {$latency_ms}ms\n\nERROR\n--------------------------------------------------------------------------------\n$error_message\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : FAIL\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n    momentry_write_log_v9($log_name, $log_block);\n\n    return [\n      \'ok\' => false,\n      \'trace_id\' => $trace_id,\n      \'timestamp\' => $timestamp,\n      \'url\' => $url,\n      \'method\' => $method,\n      \'path\' => $path,\n      \'latency_ms\' => $latency_ms,\n      \'message\' => $error_message\n    ];\n  }\n\n  $http_code = wp_remote_retrieve_response_code($response);\n  $latency_ms = round((microtime(true) - $start_time) * 1000);\n\n$ok = ($http_code >= 200 && $http_code < 300); 	\n  $content_type = wp_remote_retrieve_header($response, \'content-type\');\n  $body_raw = wp_remote_retrieve_body($response);\n  $json = json_decode($body_raw, true);\n  $ok = $http_code >= 200 && $http_code < 300;\n  $level = momentry_log_level_v9($http_code);\n\n  $pretty_response = wp_json_encode(\n    $json ?? $body_raw,\n    JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES\n  );\n\n  $summary = $ok ? \'PASS\' : \'FAIL\';\nglobal $wpdb;\n\n$wpdb->insert(\n  $wpdb->prefix . \'momentry_api_logs\',\n  [\n    \'trace_id\' => $trace_id,\n    \'user_id\' => get_current_user_id(),\n    \'user_login\' => momentry_user_name_v9(),\n    \'page_source\' => \'Momentry API Console\',\n    \'method\' => $method,\n    \'path\' => $path,\n    \'request_body\' => wp_json_encode($body ?: new stdClass()),\n    \'response_body\' => $body_raw,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'success\' => $ok ? 1 : 0,\n    \'error_message\' => $ok ? null : $body_raw\n  ]\n);\n  $log_block =\n\"================================================================================\n[$timestamp] [$level] [API_REQUEST]\n================================================================================\n\nREQUEST\n--------------------------------------------------------------------------------\nAPI Group   : $api_group\nAPI Name    : $api_name\nMethod      : $method\nURL         : $url\nTrace ID    : $trace_id\nSource      : Momentry Debug Console v9\nTimeout     : 60000ms\n\nREQUEST BODY\n--------------------------------------------------------------------------------\n$pretty_request\n\nCURL\n--------------------------------------------------------------------------------\n$curl_command\n\nRESPONSE\n--------------------------------------------------------------------------------\nHTTP Status : $http_code\nLatency     : {$latency_ms}ms\nContent-Type: $content_type\n\nRAW RESPONSE\n--------------------------------------------------------------------------------\n$pretty_response\n\nSUMMARY\n--------------------------------------------------------------------------------\nResult      : $summary\nTrace ID    : $trace_id\n\n================================================================================\nEND LOG\n================================================================================\n\";\n\n  momentry_write_log_v9($log_name, $log_block);\n\n  return [\n    \'ok\' => $ok,\n    \'trace_id\' => $trace_id,\n    \'timestamp\' => $timestamp,\n    \'url\' => $url,\n    \'method\' => $method,\n    \'path\' => $path,\n    \'http_code\' => $http_code,\n    \'latency_ms\' => $latency_ms,\n    \'content_type\' => $content_type,\n    \'request_body\' => $body ?: new stdClass(),\n    \'data\' => $json ?? $body_raw\n  ];\n}\n\nadd_shortcode(\'momentry_api_dashboard_v9\', function () {\n\nob_start();\n?>\n\n<div id=\"momentry-debug-v9\">\n\n  <div class=\"v9-header\">\n    <div>\n      <h2>Momentry API Debug Console v9</h2>\n    </div>\n    <div class=\"v9-base\">Base: http://192.168.110.201:3002</div>\n  </div>\n\n  <div class=\"log-panel\">\n    <label>Current Log File</label>\n    <div class=\"log-row\">\n      <input id=\"logName\" readonly />\n      <button id=\"renewLogBtn\" type=\"button\">Renew Log File</button>\n    </div>\n  </div>\n\n  <div class=\"vars-panel\">\n    <label>File UUID\n      <input id=\"fileUuidInput\" value=\"bd80fec92b0b6963d177a2c55bf713e2\" />\n    </label>\n    <label>Identity UUID\n      <input id=\"identityUuidInput\" value=\"2b0ddefee2a945339308b375594604d5\" />\n    </label>\n    <label>Trace ID\n      <input id=\"traceIdInput\" value=\"194\" />\n    </label>\n    <label>Query\n      <input id=\"queryInput\" value=\"Cary\" />\n    </label>\n  </div>\n\n  <div class=\"v9-layout\">\n\n    <div class=\"api-sidebar\">\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"systemApis\">System <span>⌄</span></button>\n      <div id=\"systemApis\" class=\"section-items open\">\n        <button data-template=\"health\">Health</button>\n        <button data-template=\"health_detailed\">Health Detailed</button>\n        <button data-template=\"jobs\">Jobs</button>\n        <button data-template=\"stats_inference\">Inference</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"fileApis\">Files <span>⌄</span></button>\n      <div id=\"fileApis\" class=\"section-items open\">\n        <button data-template=\"scan\">Scan</button>\n        <button data-template=\"register\">Register</button>\n        <button data-template=\"probe\">Probe</button>\n        <button data-template=\"process\">Process</button>\n        <button data-template=\"progress\">Progress</button>\n        <button data-template=\"unregister\">Unregister</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"searchApis\">Search <span>⌄</span></button>\n      <div id=\"searchApis\" class=\"section-items open\">\n        <button data-template=\"identity_text\">Identity Text</button>\n        <button data-template=\"identities_search\">Identities Search</button>\n        <button data-template=\"search_universal\">Universal Search</button>\n        <button data-template=\"search_smart\">Smart Search</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"identityApis\">Identity <span>⌄</span></button>\n      <div id=\"identityApis\" class=\"section-items open\">\n        <button data-template=\"identities\">Identities</button>\n        <button data-template=\"identity_detail\">Identity Detail</button>\n        <button data-template=\"identity_files\">Identity Files</button>\n        <button data-template=\"identity_faces\">Identity Faces</button>\n        <button data-template=\"identity_chunks\">Identity Chunks</button>\n        <button data-template=\"identity_traces\">Identity Traces</button>\n        <button data-template=\"identity_patch\">PATCH Identity</button>\n      </div>\n\n      <button class=\"section-toggle\" type=\"button\" data-target=\"mediaApis\">Media <span>⌄</span></button>\n      <div id=\"mediaApis\" class=\"section-items open\">\n        <button data-template=\"video_clip\">Video Clip</button>\n        <button data-template=\"thumbnail\">Thumbnail frame=100</button>\n        <button data-template=\"video_thumbnail_auto\">Video Thumbnail Auto</button>\n        <button data-template=\"trace_thumbnail\">Trace Thumbnail</button>\n      </div>\n\n    </div>\n\n    <div class=\"editor\">\n\n      <label>Method</label>\n      <select id=\"method\">\n  <option>GET</option>\n  <option>POST</option>\n  <option>PATCH</option>\n  <option>DELETE</option>\n</select>\n\n      <label>Path</label>\n      <textarea id=\"path\"></textarea>\n\n      <label>Body JSON</label>\n      <textarea id=\"body\">{}</textarea>\n\n      <label>curl command</label>\n      <textarea id=\"curlPreview\"></textarea>\n\n      <div class=\"action-row\">\n        <button id=\"runBtn\">Run API</button>\n        <button id=\"copyCurlBtn\">Copy curl</button>\n        <button id=\"copyResponseBtn\">Copy Response</button>\n        <button id=\"viewLogBtn\">View Log</button>\n        <button id=\"downloadLogBtn\">Download Log</button>\n        <button id=\"clearLogBtn\">Clear Log</button>\n      </div>\n\n    </div>\n  </div>\n\n  <h3>Response / Log</h3>\n  <pre id=\"resultBox\">Ready.</pre>\n\n</div>\n\n<style>\n#momentry-debug-v9{\n  max-width:1280px;\n  margin:40px auto;\n  padding:28px;\n  color:#e2e8f0;\n  background:#0f172a;\n  border-radius:24px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;\n}\n#momentry-debug-v9 h2,\n#momentry-debug-v9 h3,\n#momentry-debug-v9 label{\n  color:#fff;\n}\n#momentry-debug-v9 h2{\n  margin:0;\n  font-size:28px;\n}\n#momentry-debug-v9 p{\n  margin:6px 0 0;\n  color:#94a3b8;\n}\n.v9-header{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n  gap:18px;\n  margin-bottom:22px;\n}\n.v9-base{\n  color:#cbd5e1;\n  background:#020617;\n  border:1px solid #334155;\n  padding:8px 12px;\n  border-radius:999px;\n  font-size:12px;\n}\n#momentry-debug-v9 label{\n  font-weight:700;\n}\n.log-panel{\n  margin-bottom:18px;\n}\n.log-row{\n  display:flex;\n  gap:10px;\n  margin-top:8px;\n}\n#logName,\n.vars-panel input{\n  flex:1;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n  box-sizing:border-box;\n}\n.vars-panel{\n  display:grid;\n  grid-template-columns:1fr 1fr 140px 220px;\n  gap:12px;\n  background:#111827;\n  border:1px solid #334155;\n  padding:14px;\n  border-radius:18px;\n  margin-bottom:22px;\n}\n.vars-panel label{\n  display:flex;\n  flex-direction:column;\n  gap:8px;\n  color:#cbd5e1 !important;\n  font-size:13px;\n}\n.v9-layout{\n  display:grid;\n  grid-template-columns:230px minmax(0,1fr);\n  gap:20px;\n  align-items:start;\n}\n.api-sidebar{\n  background:#020617;\n  border:1px solid #334155;\n  border-radius:18px;\n  padding:12px;\n  position:sticky;\n  top:20px;\n}\n.section-toggle{\n  width:100%;\n  background:#1e293b;\n  color:#fff;\n  border:0;\n  padding:11px 12px;\n  border-radius:12px;\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  font-weight:800;\n  cursor:pointer;\n  margin:8px 0;\n}\n.section-items{\n  display:none;\n  flex-direction:column;\n  gap:8px;\n  padding:4px 0 10px;\n}\n.section-items.open{\n  display:flex;\n}\n.section-items button,\n.action-row button,\n#renewLogBtn{\n  border:0;\n  background:#2563eb;\n  color:white;\n  padding:10px 14px;\n  border-radius:999px;\n  cursor:pointer;\n  font-weight:700;\n  text-align:left;\n}\n.section-items button{\n  background:#0f172a;\n  border:1px solid #334155;\n  border-radius:12px;\n  color:#cbd5e1;\n}\n.section-items button:hover{\n  background:#1e293b;\n  color:#fff;\n}\n#renewLogBtn{\n  background:#0ea5e9;\n}\n.action-row button:hover,\n#renewLogBtn:hover{\n  background:#3b82f6;\n}\n.editor{\n  display:grid;\n  grid-template-columns:140px 1fr;\n  gap:14px;\n  align-items:start;\n}\n.editor label{\n  padding-top:12px;\n}\n.editor textarea,\n.editor select{\n  background:#020617;\n  border:1px solid #334155;\n  color:#e2e8f0;\n  border-radius:14px;\n  padding:12px;\n  width:100%;\n  box-sizing:border-box;\n}\n#path{min-height:46px;}\n#body,#curlPreview{min-height:140px;}\n.action-row{\n  grid-column:2;\n  display:flex;\n  flex-wrap:wrap;\n  gap:10px;\n  margin-top:8px;\n}\n#runBtn{\n  background:#16a34a;\n}\n#resultBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5f5;\n  border-radius:16px;\n  padding:18px;\n  white-space:pre-wrap;\n  overflow:auto;\n  max-height:620px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  line-height:1.5;\n}\n@media(max-width:960px){\n  .v9-layout{grid-template-columns:1fr;}\n  .vars-panel{grid-template-columns:1fr;}\n  .editor{grid-template-columns:1fr;}\n  .action-row{grid-column:1;}\n}\n</style>\n\n<script>\n			  const wpRestNonce = \'<?php echo esc_js(wp_create_nonce(\'wp_rest\')); ?>\';\nconst templates = {\n  health:{group:\"System\",name:\"Health\",method:\"GET\",path:\"/health\",body:{}},\n  health_detailed:{group:\"System\",name:\"Health Detailed\",method:\"GET\",path:\"/health/detailed\",body:{}},\n  jobs:{group:\"System\",name:\"Jobs\",method:\"GET\",path:\"/api/v1/jobs\",body:{}},\n  stats_inference:{group:\"System\",name:\"Inference\",method:\"GET\",path:\"/api/v1/stats/inference\",body:{}},\n\n  scan:{group:\"Files\",name:\"Scan\",method:\"GET\",path:\"/api/v1/files/scan\",body:{}},\n  register:{group:\"Files\",name:\"Register\",method:\"POST\",path:\"/api/v1/files/register\",body:{file_path:\"/Users/accusys/momentry/var/sftpgo/data/demo/view7.mp4\"}},\n  probe:{group:\"Files\",name:\"Probe\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/probe\",body:{}},\n  process:{\n    group:\"Files\",\n    name:\"Process\",\n    method:\"POST\",\n    path:\"/api/v1/file/{{file_uuid}}/process\",\n    body:{\n      file_uuid:\"{{file_uuid}}\",\n      processors:[\n        \"cut\",\n        \"asr\",\n        \"asrx\",\n        \"yolo\",\n        \"ocr\",\n        \"face\",\n        \"pose\",\n        \"visual_chunk\",\n        \"story\",\n        \"5w1h\"\n      ]\n    }\n  },\n  progress:{group:\"Files\",name:\"Progress\",method:\"GET\",path:\"/api/v1/progress/{{file_uuid}}\",body:{}},\n  unregister:{group:\"Files\",name:\"Unregister\",method:\"POST\",path:\"/api/v1/unregister\",body:{file_uuid:\"{{file_uuid}}\"}},\n\n  identity_text:{group:\"Search\",name:\"Identity Text\",method:\"GET\",path:\"/api/v1/search/identity_text?q={{query}}&uuid={{file_uuid}}\",body:{}},\n  identities_search:{group:\"Search\",name:\"Identities Search\",method:\"GET\",path:\"/api/v1/identities/search?q={{query}}\",body:{}},\n  search_universal:{group:\"Search\",name:\"Universal Search\",method:\"POST\",path:\"/api/v1/search/universal\",body:{query:\"charles\",file_uuid:\"{{file_uuid}}\",page:1,page_size:20}},\n  search_smart:{group:\"Search\",name:\"Smart Search\",method:\"POST\",path:\"/api/v1/search/smart\",body:{query:\"people talking about divorce and dishonesty\",file_uuid:\"{{file_uuid}}\",page:1,page_size:10}},\n\n  identities:{group:\"Identity\",name:\"Identities\",method:\"GET\",path:\"/api/v1/identities?page=1&page_size=20\",body:{}},\n  identity_detail:{group:\"Identity\",name:\"Identity Detail\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}\",body:{}},\n  identity_files:{group:\"Identity\",name:\"Identity Files\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/files\",body:{}},\n  identity_faces:{group:\"Identity\",name:\"Identity Faces\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/faces\",body:{}},\n  identity_chunks:{group:\"Identity\",name:\"Identity Chunks\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/chunks\",body:{}},\n  identity_traces:{group:\"Identity\",name:\"Identity Traces\",method:\"GET\",path:\"/api/v1/identity/{{identity_uuid}}/traces\",body:{}},\nidentity_patch:{\n  group:\"Identity\",\n  name:\"PATCH Identity\",\n  method:\"PATCH\",\n  path:\"/api/v1/identity/{{identity_uuid}}\",\n  body:{\n    name:\"Susan_Test_PERSON_278\",\n    metadata:{\n      role:\"test role\",\n      description:\"PATCH identity API test\",\n      aliases:[\n        {\n          locale:\"en\",\n          name:\"Susan Test\"\n        },\n        {\n          locale:\"zh-TW\",\n          name:\"Susan 測試\"\n        }\n      ]\n    }\n  }\n},\n\n  video_clip:{group:\"Media\",name:\"Video Clip\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/video?start_time=1&end_time=4\",body:{}},\n  thumbnail:{group:\"Media\",name:\"Thumbnail frame=100\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/thumbnail?frame=100\",body:{}},\n  video_thumbnail_auto:{group:\"Media\",name:\"Video Thumbnail Auto\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/thumbnail\",body:{}},\n  trace_thumbnail:{group:\"Media\",name:\"Trace Thumbnail\",method:\"GET\",path:\"/api/v1/file/{{file_uuid}}/trace/{{trace_id}}/thumbnail\",body:{}}\n};\n\nconst methodEl = document.getElementById(\"method\");\nconst pathEl = document.getElementById(\"path\");\nconst bodyEl = document.getElementById(\"body\");\nconst curlEl = document.getElementById(\"curlPreview\");\nconst resultBox = document.getElementById(\"resultBox\");\nconst logNameEl = document.getElementById(\"logName\");\nconst fileUuidEl = document.getElementById(\"fileUuidInput\");\nconst identityUuidEl = document.getElementById(\"identityUuidInput\");\nconst traceIdEl = document.getElementById(\"traceIdInput\");\nconst queryEl = document.getElementById(\"queryInput\");\n\nlet currentTemplateKey = \"health\";\n\nfunction pad(n){ return String(n).padStart(2, \"0\"); }\n\nfunction makeLogName(){\n  const d = new Date();\n  return \"momentry-api-\" +\n    d.getFullYear() +\n    pad(d.getMonth() + 1) +\n    pad(d.getDate()) +\n    \"-\" +\n    pad(d.getHours()) +\n    pad(d.getMinutes()) +\n    pad(d.getSeconds());\n}\n\nfunction initLogName(){\n  let saved = localStorage.getItem(\"momentry_current_log_name_v9\");\n  if(!saved){\n    saved = makeLogName();\n    localStorage.setItem(\"momentry_current_log_name_v9\", saved);\n  }\n  logNameEl.value = saved;\n}\n\nfunction replaceVars(input){\n  return String(input || \"\")\n    .replaceAll(\"{{file_uuid}}\", fileUuidEl.value.trim())\n    .replaceAll(\"{{identity_uuid}}\", identityUuidEl.value.trim())\n    .replaceAll(\"{{trace_id}}\", traceIdEl.value.trim())\n    .replaceAll(\"{{query}}\", encodeURIComponent(queryEl.value.trim()));\n}\n\nfunction deepReplace(obj){\n  if(typeof obj === \"string\") return replaceVars(obj);\n  if(Array.isArray(obj)) return obj.map(deepReplace);\n  if(obj && typeof obj === \"object\"){\n    const out = {};\n    Object.keys(obj).forEach(k => out[k] = deepReplace(obj[k]));\n    return out;\n  }\n  return obj;\n}\n\nfunction updateCurl(){\n  const method = methodEl.value;\n  const path = pathEl.value;\n  const body = bodyEl.value;\n\n  let curl = `curl -i -s -X ${method} \"$BASE${path}\" \\\\\\n-H \"$KEY\"`;\n\n  if(method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-H \"Content-Type: application/json\"`;\n  }\n\n  if(body.trim() && body.trim() !== \"{}\" && method !== \"GET\" && method !== \"HEAD\"){\n    curl += ` \\\\\\n-d \'${body}\'`;\n  }\n\n  curlEl.value = curl;\n}\n\nfunction setTemplate(key){\n  currentTemplateKey = key;\n  const t = templates[key];\n  if(!t) return;\n\n  methodEl.value = t.method;\n  pathEl.value = replaceVars(t.path);\n  bodyEl.value = JSON.stringify(deepReplace(t.body), null, 2);\n  updateCurl();\n}\n\ninitLogName();\nsetTemplate(\"health\");\n\ndocument.querySelectorAll(\"[data-template]\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    setTemplate(btn.dataset.template);\n  });\n});\n\ndocument.querySelectorAll(\".section-toggle\").forEach(btn=>{\n  btn.addEventListener(\"click\", ()=>{\n    const target = document.getElementById(btn.dataset.target);\n    const arrow = btn.querySelector(\"span\");\n    if(!target) return;\n    target.classList.toggle(\"open\");\n    if(arrow) arrow.textContent = target.classList.contains(\"open\") ? \"⌄\" : \"›\";\n  });\n});\n\nmethodEl.addEventListener(\"change\", updateCurl);\npathEl.addEventListener(\"input\", updateCurl);\nbodyEl.addEventListener(\"input\", updateCurl);\n\n[fileUuidEl, identityUuidEl, traceIdEl, queryEl].forEach(input=>{\n  input.addEventListener(\"input\", ()=>{\n    setTemplate(currentTemplateKey);\n  });\n});\n\ndocument.getElementById(\"renewLogBtn\").addEventListener(\"click\", ()=>{\n  const next = makeLogName();\n  localStorage.setItem(\"momentry_current_log_name_v9\", next);\n  logNameEl.value = next;\n  resultBox.textContent = \"New log file created: \" + next + \".log\";\n});\n\ndocument.getElementById(\"copyCurlBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(curlEl.value);\n  alert(\"curl copied\");\n});\n\ndocument.getElementById(\"copyResponseBtn\").addEventListener(\"click\", async()=>{\n  await navigator.clipboard.writeText(resultBox.textContent);\n  alert(\"response copied\");\n});\n\ndocument.getElementById(\"runBtn\").addEventListener(\"click\", async()=>{\n  resultBox.textContent = \"Running...\";\n\n  try{\n    const parsedBody = JSON.parse(bodyEl.value || \"{}\");\n    const t = templates[currentTemplateKey] || {group:\"General\",name:\"Manual API\"};\n\n    const wpRestNonce = \'<?php echo esc_js(wp_create_nonce(\'wp_rest\')); ?>\';\n\nconst res = await fetch(\"/wp-json/momentry/v1/api-test-v9\",{\n  method:\"POST\",\n  credentials:\'same-origin\',\n  headers:{\n    \"Content-Type\":\"application/json\",\n    \"X-WP-Nonce\": wpRestNonce\n  },\n      body:JSON.stringify({\n        method:methodEl.value,\n        path:pathEl.value,\n        body:parsedBody,\n        log_name:logNameEl.value,\n        api_group:t.group,\n        api_name:t.name\n      })\n    });\n\n    const data = await res.json();\n    resultBox.textContent = JSON.stringify(data,null,2);\n\n    if(data && data.data && data.data.identities && Array.isArray(data.data.identities) && data.data.identities.length > 0){\n      const first = data.data.identities[0];\n      if(first.identity_uuid){\n        identityUuidEl.value = first.identity_uuid;\n      }\n    }\n\n  }catch(err){\n    resultBox.textContent = \"Error: \" + err.message;\n  }\n});\n\nasync function logAction(action){\n  const res = await fetch(\"/wp-json/momentry/v1/api-log-v9\",{\n  method:\"POST\",\n  credentials:\'same-origin\',\n  headers:{\n    \"Content-Type\":\"application/json\",\n    \"X-WP-Nonce\": wpRestNonce\n  },\n    body:JSON.stringify({\n      action,\n      log_name:logNameEl.value\n    })\n  });\n\n  return await res.json();\n}\n\ndocument.getElementById(\"viewLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  resultBox.textContent = data.content || \"(empty log)\";\n});\n\ndocument.getElementById(\"clearLogBtn\").addEventListener(\"click\", async()=>{\n  if(!confirm(\"Clear current log file?\")) return;\n  const data = await logAction(\"clear\");\n  resultBox.textContent = JSON.stringify(data,null,2);\n});\n\ndocument.getElementById(\"downloadLogBtn\").addEventListener(\"click\", async()=>{\n  const data = await logAction(\"view\");\n  const blob = new Blob([data.content || \"\"], {type:\"text/plain\"});\n  const url = URL.createObjectURL(blob);\n\n  const a = document.createElement(\"a\");\n  a.href = url;\n  a.download = logNameEl.value + \".log\";\n  a.click();\n\n  URL.revokeObjectURL(url);\n});\n</script>\n\n<?php\nreturn ob_get_clean();\n});\n','使用 3002 時，就開啟這個','global',0,10,1,'2026-05-28 03:14:40',1,NULL),
(68,'raptor_workflow_demo','<p>四流程 Demo</p>','/**\n * Momentry / RAPTOR Workflow Demo Page\n * Shortcode: [raptor_workflow_demo]\n */\n\nif (!defined(\'ABSPATH\')) exit;\nadd_action(\'init\', function () {\n  if (empty($_GET[\'raptor_video_proxy\'])) return;\n\n  $url = isset($_GET[\'url\']) ? (string) $_GET[\'url\'] : \'\';\n\n  $url = str_replace(\'\"\', \'%22\', $url);\n  $url = str_replace(\' \', \'%20\', $url);\n  $url = str_replace(\'\\\\\', \'\', $url);\n\n  if (!$url) {\n    status_header(400);\n    echo \'Missing url\';\n    exit;\n  }\n\n  if (!preg_match(\'#^http://raptor_open_0_3_api\\.dhtsolution\\.com:8333/#\', $url)) {\n    status_header(403);\n    echo \'URL not allowed\';\n    exit;\n  }\n\n  while (ob_get_level()) {\n    ob_end_clean();\n  }\n\n$chunk_size = 4 * 1024 * 1024; // 4MB\n\n$range = $_SERVER[\'HTTP_RANGE\'] ?? \'bytes=0-\' . ($chunk_size - 1);\n\nif (preg_match(\'/^bytes=(\\d+)-$/\', $range, $m)) {\n  $start = intval($m[1]);\n  $end = $start + $chunk_size - 1;\n  $range = \'bytes=\' . $start . \'-\' . $end;\n}  $response_headers = [];\n\n  $ch = curl_init($url);\n\n  curl_setopt_array($ch, [\n    CURLOPT_RETURNTRANSFER => true,\n    CURLOPT_FOLLOWLOCATION => true,\n    CURLOPT_HEADER => false,\n    CURLOPT_NOBODY => false,\n    CURLOPT_TIMEOUT => 0,\n    CURLOPT_CONNECTTIMEOUT => 30,\n    CURLOPT_HTTPHEADER => [\n      \'User-Agent: Momentry-Raptor-VideoProxy/1.0\',\n      \'Range: \' . $range\n    ],\n    CURLOPT_HEADERFUNCTION => function($ch, $header) use (&$response_headers) {\n      $len = strlen($header);\n      $h = trim($header);\n      if ($h !== \'\') $response_headers[] = $h;\n      return $len;\n    },\n  ]);\n\n  $body = curl_exec($ch);\n  $err = curl_error($ch);\n  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n  curl_close($ch);\n\n  if ($body === false || $code < 200 || $code >= 300) {\n    status_header(502);\n    header(\'Content-Type:text/plain;charset=utf-8\');\n    echo \"Proxy failed\\n\\n\";\n    echo \"curl_error: \" . $err . \"\\n\";\n    echo \"http_code: \" . $code . \"\\n\";\n    echo \"range: \" . $range . \"\\n\";\n    exit;\n  }\n\n  status_header($code);\n\n  foreach ($response_headers as $h) {\n    if (\n      stripos($h, \'Content-Type:\') === 0 ||\n      stripos($h, \'Content-Length:\') === 0 ||\n      stripos($h, \'Content-Range:\') === 0 ||\n      stripos($h, \'Accept-Ranges:\') === 0 ||\n      stripos($h, \'Content-Disposition:\') === 0\n    ) {\n      header($h);\n    }\n  }\n\n  header(\'Cache-Control: no-store\');\n\n  echo $body;\n  exit;\n});\n\nif (!defined(\'RAPTOR_BASE_URL\')) {\n  define(\'RAPTOR_BASE_URL\', \'http://raptor_open_0_3_api.dhtsolution.com:8012\');\n}\nif (!defined(\'RAPTOR_DEFAULT_USERNAME\')) {\n  define(\'RAPTOR_DEFAULT_USERNAME\', \'accusys_user1\');\n}\nif (!defined(\'RAPTOR_DEFAULT_PASSWORD\')) {\n  define(\'RAPTOR_DEFAULT_PASSWORD\', \'12345\');\n}\nif (!defined(\'RAPTOR_DEFAULT_REALM\')) {\n  define(\'RAPTOR_DEFAULT_REALM\', \'dhtsolution\');\n}\n\nadd_action(\'rest_api_init\', function () {\n	\nregister_rest_route(\'raptor-demo/v1\', \'/video-proxy\', [\n  \'methods\' => \'GET\',\n  \'callback\' => \'raptor_demo_video_proxy\',\n  \'permission_callback\' => \'__return_true\'\n]);	\n\n  register_rest_route(\'raptor-demo/v1\', \'/login\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_demo_login\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}\n]);\n\n  register_rest_route(\'raptor-demo/v1\', \'/upload\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_demo_upload\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}\n]);\n\n  register_rest_route(\'raptor-demo/v1\', \'/status\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_demo_status\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}\n]);\n\n  register_rest_route(\'raptor-demo/v1\', \'/search\', [\n    \'methods\' => \'POST\',\n    \'callback\' => \'raptor_demo_search\',\n\'permission_callback\' => function () {\n  return is_user_logged_in();\n}\n]);\n\n});\n\nfunction raptor_demo_video_proxy(WP_REST_Request $request) {\n\n  $url = (string) $request->get_param(\'url\');\n\n  $url = str_replace(\'\"\', \'%22\', $url);\n  $url = str_replace(\' \', \'%20\', $url);\n  $url = str_replace(\'\\\\\', \'\', $url);\n\n  if (!$url) {\n    status_header(400);\n    echo \'Missing url\';\n    exit;\n  }\n\n  if (!preg_match(\'#^http://raptor_open_0_3_api\\.dhtsolution\\.com:8333/#\', $url)) {\n    status_header(403);\n    echo \'URL not allowed\';\n    exit;\n  }\n\n  while (ob_get_level()) {\n    ob_end_clean();\n  }\n\n  $range = $_SERVER[\'HTTP_RANGE\'] ?? \'bytes=0-\';\n\n  $response_headers = [];\n\n  $ch = curl_init($url);\n\n  curl_setopt_array($ch, [\n    CURLOPT_RETURNTRANSFER => true,\n    CURLOPT_FOLLOWLOCATION => true,\n    CURLOPT_HEADER => false,\n    CURLOPT_NOBODY => false,\n    CURLOPT_TIMEOUT => 0,\n    CURLOPT_CONNECTTIMEOUT => 30,\n    CURLOPT_HTTPHEADER => [\n      \'User-Agent: Momentry-Raptor-VideoProxy/1.0\',\n      \'Range: \' . $range\n    ],\n    CURLOPT_HEADERFUNCTION => function($ch, $header) use (&$response_headers) {\n      $len = strlen($header);\n      $h = trim($header);\n      if ($h !== \'\') $response_headers[] = $h;\n      return $len;\n    },\n  ]);\n\n  $body = curl_exec($ch);\n  $err = curl_error($ch);\n  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n  curl_close($ch);\n\n  if ($body === false || $code < 200 || $code >= 300) {\n    status_header(502);\n    header(\'Content-Type:text/plain;charset=utf-8\');\n    echo \"Proxy failed\\n\\n\";\n    echo \"curl_error: \" . $err . \"\\n\";\n    echo \"http_code: \" . $code . \"\\n\";\n    echo \"range: \" . $range . \"\\n\";\n    exit;\n  }\n\n  status_header($code);\n\n  foreach ($response_headers as $h) {\n    if (\n      stripos($h, \'Content-Type:\') === 0 ||\n      stripos($h, \'Content-Length:\') === 0 ||\n      stripos($h, \'Content-Range:\') === 0 ||\n      stripos($h, \'Accept-Ranges:\') === 0\n    ) {\n      header($h);\n    }\n  }\n\n  header(\'Cache-Control: no-store\');\n\n  echo $body;\n  exit;\n}\n\nfunction raptor_demo_trace_id() {\n  return \'rpd_\' . gmdate(\'Ymd_His\') . \'_\' . wp_generate_password(6, false, false);\n}\nfunction raptor_demo_user_name() {\n  $u = wp_get_current_user();\n\n  if ($u && $u->exists()) {\n    return $u->display_name;\n  }\n\n  return \'guest\';\n}\n\nfunction raptor_demo_response($ok, $data = [], $http_code = 200) {\n  return new WP_REST_Response(array_merge([\n    \'ok\' => $ok,\n    \'trace_id\' => raptor_demo_trace_id(),\n    \'timestamp\' => gmdate(\'Y-m-d\\TH:i:s\\Z\')\n  ], $data), $http_code);\n}\n\nfunction raptor_demo_login() {\n  $url = RAPTOR_BASE_URL . \'/api/0.3/sso/login\';\n\n  $start = microtime(true);\n\n  $res = wp_remote_post($url, [\n    \'timeout\' => 60,\n    \'headers\' => [\n      \'Accept\' => \'application/json\',\n      \'Content-Type\' => \'application/x-www-form-urlencoded\',\n      \'User-Agent\' => \'Momentry-Raptor-Demo/1.0\'\n    ],\n    \'body\' => [\n      \'username\' => RAPTOR_DEFAULT_USERNAME,\n      \'password\' => RAPTOR_DEFAULT_PASSWORD,\n      \'realm_name\' => RAPTOR_DEFAULT_REALM\n    ]\n  ]);\n\n  $latency = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($res)) {\n    return raptor_demo_response(false, [\n      \'step\' => \'login\',\n      \'message\' => $res->get_error_message(),\n      \'latency_ms\' => $latency\n    ], 500);\n  }\n\n  $code = wp_remote_retrieve_response_code($res);\n  $raw = wp_remote_retrieve_body($res);\n  $json = json_decode($raw, true);\n\n $ok = ($code >= 200 && $code < 300);\n\nglobal $wpdb;\n\n$wpdb->insert(\n  $wpdb->prefix . \'momentry_api_logs\',\n  [\n    \'trace_id\' => raptor_demo_trace_id(),\n	  \n	  \'user_id\' => get_current_user_id(),\n\'user_login\' => raptor_demo_user_name(),\'page_source\' => \'RAPTOR Demo\',\n    \'method\' => \'POST\',\n    \'path\' => \'/raptor-demo/v1/login → \' . $url,\n    \'request_body\' => wp_json_encode([\n      \'username\' => RAPTOR_DEFAULT_USERNAME,\n      \'realm_name\' => RAPTOR_DEFAULT_REALM\n    ]),\n    \'response_body\' => $raw,\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'success\' => $ok ? 1 : 0,\n    \'error_message\' => $ok ? null : $raw\n  ]\n);\n\nreturn raptor_demo_response($ok, [\n  \'step\' => \'login\',\n  \'http_code\' => $code,\n  \'latency_ms\' => $latency,\n  \'data\' => $json ?: $raw\n]);\n}\n\nfunction raptor_demo_upload(WP_REST_Request $request) {\n$token = sanitize_text_field(\n  $request->get_param(\'token\')\n  ?: ($_POST[\'token\'] ?? \'\')\n  ?: ($_SERVER[\'HTTP_X_RAPTOR_TOKEN\'] ?? \'\')\n);\n  if (!$token) {\n    return raptor_demo_response(false, [\n      \'step\' => \'upload\',\n      \'message\' => \'Missing Bearer token\'\n    ], 401);\n  }\n\n  if (empty($_FILES[\'primary_file\'])) {\n    return raptor_demo_response(false, [\n      \'step\' => \'upload\',\n      \'message\' => \'Missing primary_file\'\n    ], 400);\n  }\n\n  $file = $_FILES[\'primary_file\'];\n  $tmp = $file[\'tmp_name\'];\n  $filename = sanitize_file_name($file[\'name\']);\n\n  $url = RAPTOR_BASE_URL . \'/api/0.3/asset/fileupload_analysis\';\n\n  $start = microtime(true);\n\n  $body = [\n    \'primary_file\' => new CURLFile($tmp, $file[\'type\'] ?: \'video/mp4\', $filename),\n    \'processing_mode\' => \'default\'\n  ];\n\n  $ch = curl_init();\n  curl_setopt_array($ch, [\n    CURLOPT_URL => $url,\n    CURLOPT_POST => true,\n    CURLOPT_POSTFIELDS => $body,\n    CURLOPT_RETURNTRANSFER => true,\n    CURLOPT_TIMEOUT => 600,\n    CURLOPT_HTTPHEADER => [\n      \'Accept: application/json\',\n      \'Authorization: Bearer \' . $token,\n      \'User-Agent: Momentry-Raptor-Demo/1.0\'\n    ],\n  ]);\n\n  $raw = curl_exec($ch);\n  $err = curl_error($ch);\n  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n$err  = curl_error($ch);\n\nheader(\'X-Raptor-Proxy-Code: \' . $code);\nif ($err) header(\'X-Raptor-Proxy-Error: \' . $err);\n  curl_close($ch);\n\n  $latency = round((microtime(true) - $start) * 1000);\n\n  if ($err) {\n    return raptor_demo_response(false, [\n      \'step\' => \'upload\',\n      \'message\' => $err,\n      \'latency_ms\' => $latency\n    ], 500);\n  }\n\n  $json = json_decode($raw, true);\n$ok = ($code >= 200 && $code < 300);\n\nglobal $wpdb;\n\n$wpdb->insert(\n  $wpdb->prefix . \'momentry_api_logs\',\n  [\n    \'trace_id\' => raptor_demo_trace_id(),\n	  \'user_id\' => get_current_user_id(),\n\'user_login\' => raptor_demo_user_name(),\'page_source\' => \'RAPTOR Demo\',\n    \'method\' => \'POST\',\n    \'path\' => \'/raptor-demo/v1/upload → \' . $url,\n    \'request_body\' => wp_json_encode([\n      \'filename\' => $filename,\n      \'processing_mode\' => \'default\'\n    ]),\n    \'response_body\' => $raw,\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'success\' => $ok ? 1 : 0,\n    \'error_message\' => $ok ? null : $raw\n  ]\n);\n\n  return raptor_demo_response($ok, [\n    \'step\' => \'upload\',\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'data\' => $json ?: $raw\n  ]);\n}\n\nfunction raptor_demo_status(WP_REST_Request $request) {\n  $params = $request->get_json_params();\n  $token = sanitize_text_field($params[\'token\'] ?? \'\');\n  $correlation_id = sanitize_text_field($params[\'correlation_id\'] ?? \'\');\n\n  if (!$token || !$correlation_id) {\n    return raptor_demo_response(false, [\n      \'step\' => \'status\',\n      \'message\' => \'Missing token or correlation_id\'\n    ], 400);\n  }\n\n  $url = RAPTOR_BASE_URL . \'/api/0.3/processing/cache/video/\' . rawurlencode($correlation_id);\n\n  $start = microtime(true);\n\n  $res = wp_remote_get($url, [\n    \'timeout\' => 60,\n    \'headers\' => [\n      \'Accept\' => \'application/json\',\n      \'Authorization\' => \'Bearer \' . $token,\n      \'User-Agent\' => \'Momentry-Raptor-Demo/1.0\'\n    ]\n  ]);\n\n  $latency = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($res)) {\n    return raptor_demo_response(false, [\n      \'step\' => \'status\',\n      \'message\' => $res->get_error_message(),\n      \'latency_ms\' => $latency\n    ], 500);\n  }\n\n  $code = wp_remote_retrieve_response_code($res);\n  $raw = wp_remote_retrieve_body($res);\n  $json = json_decode($raw, true);\n   $ok = ($code >= 200 && $code < 300);\n\nglobal $wpdb;\n\n$wpdb->insert(\n  $wpdb->prefix . \'momentry_api_logs\',\n  [\n   \'trace_id\' => raptor_demo_trace_id(),\n\'user_id\' => get_current_user_id(),\n\'user_login\' => raptor_demo_user_name(),\'page_source\' => \'RAPTOR Demo\',\n\'method\' => \'POST\',\n\'path\' => \'/raptor-demo/v1/status → \' . $url,\n    \'request_body\' => wp_json_encode([\n      \'correlation_id\' => $correlation_id\n    ]),\n    \'response_body\' => $raw,\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'success\' => $ok ? 1 : 0,\n    \'error_message\' => $ok ? null : $raw\n  ]\n);\n\n   return raptor_demo_response($ok, [\n    \'step\' => \'status\',\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'data\' => $json ?: $raw\n  ]);\n}\n\nfunction raptor_demo_search(WP_REST_Request $request) {\n  $params = $request->get_json_params();\n\n  $token = sanitize_text_field($params[\'token\'] ?? \'\');\n  $query = sanitize_text_field($params[\'query\'] ?? \'\');\n  $top_k = intval($params[\'top_k\'] ?? 5);\n\n  if (!$token || !$query) {\n    return raptor_demo_response(false, [\n      \'step\' => \'search\',\n      \'message\' => \'Missing token or query\'\n    ], 400);\n  }\n\n  $url = RAPTOR_BASE_URL . \'/api/0.3/search/video_search\';\n\n  $payload = [\n    \'query\' => $query,\n    \'top_k\' => max(1, min($top_k, 50)),\n    \'candidate_multiplier\' => 5,\n    \'score_threshold\' => 0.52\n  ];\n\n  $start = microtime(true);\n\n  $res = wp_remote_post($url, [\n    \'timeout\' => 120,\n    \'headers\' => [\n      \'Accept\' => \'application/json\',\n      \'Content-Type\' => \'application/json\',\n      \'Authorization\' => \'Bearer \' . $token,\n      \'User-Agent\' => \'Momentry-Raptor-Demo/1.0\'\n    ],\n    \'body\' => wp_json_encode($payload)\n  ]);\n\n  $latency = round((microtime(true) - $start) * 1000);\n\n  if (is_wp_error($res)) {\n    return raptor_demo_response(false, [\n      \'step\' => \'search\',\n      \'message\' => $res->get_error_message(),\n      \'latency_ms\' => $latency\n    ], 500);\n  }\n\n  $code = wp_remote_retrieve_response_code($res);\n  $raw = wp_remote_retrieve_body($res);\n  $json = json_decode($raw, true);\n$ok = ($code >= 200 && $code < 300);\n\nglobal $wpdb;\n\n$wpdb->insert(\n  $wpdb->prefix . \'momentry_api_logs\',\n  [\n    \'trace_id\' => raptor_demo_trace_id(),\n	  \'user_id\' => get_current_user_id(),\n\'user_login\' => raptor_demo_user_name(),\'page_source\' => \'RAPTOR Demo\',\n    \'method\' => \'POST\',\n    \'path\' => \'/raptor-demo/v1/search → \' . $url,\n    \'request_body\' => wp_json_encode($payload),\n    \'response_body\' => $raw,\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'success\' => $ok ? 1 : 0,\n    \'error_message\' => $ok ? null : $raw\n  ]\n);\n\n  return raptor_demo_response($ok, [\n    \'step\' => \'search\',\n    \'http_code\' => $code,\n    \'latency_ms\' => $latency,\n    \'request_body\' => $payload,\n    \'data\' => $json ?: $raw\n  ]);\n}\n\nadd_shortcode(\'raptor_workflow_demo\', function () {\nob_start();\n?>\n\n<div id=\"momentry-raptor-demo\">\n\n  <div class=\"mr-hero\">\n    <div>\n      <div class=\"mr-eyebrow\">Momentry × RAPTOR</div>\n      <h1>Make Every Video Searchable</h1>\n      <p>Login, upload a video, watch the AI pipeline process it, then search moments and play the result directly.</p>\n    </div>\n    <div class=\"mr-status-pill\" id=\"globalStatus\">Ready</div>\n  </div>\n\n  <div class=\"mr-workflow\">\n    <div class=\"mr-step active\" id=\"stepLogin\">\n      <span>1</span>\n      <strong>Login</strong>\n      <small>Bearer Token</small>\n    </div>\n    <div class=\"mr-line\"></div>\n    <div class=\"mr-step\" id=\"stepUpload\">\n      <span>2</span>\n      <strong>Upload</strong>\n      <small>Trigger Pipeline</small>\n    </div>\n    <div class=\"mr-line\"></div>\n    <div class=\"mr-step\" id=\"stepProcess\">\n      <span>3</span>\n      <strong>Process</strong>\n      <small>Transcribe / Index</small>\n    </div>\n    <div class=\"mr-line\"></div>\n    <div class=\"mr-step\" id=\"stepSearch\">\n      <span>4</span>\n      <strong>Search</strong>\n      <small>Find Moments</small>\n    </div>\n  </div>\n\n  <div class=\"mr-main\">\n\n    <section class=\"mr-panel mr-control\">\n      <h2>Workflow Control</h2>\n\n      <button class=\"mr-btn primary\" id=\"loginBtn\">Login / Refresh Token</button>\n\n      <div class=\"mr-token-box\">\n        <label>Bearer Token</label>\n        <input id=\"tokenInput\" placeholder=\"Token will appear after login\">\n      </div>\n\n      <div class=\"mr-upload-box\">\n        <label>Upload Video (.mp4, recommended under 30 min)</label>\n        <input id=\"videoFile\" type=\"file\" accept=\"video/mp4,video/*\">\n        <button class=\"mr-btn\" id=\"uploadBtn\">Upload Video</button>\n      </div>\n\n      <div class=\"mr-meta\">\n        <div>\n          <span>Filename</span>\n          <strong id=\"filenameText\">—</strong>\n        </div>\n        <div>\n          <span>Asset Path</span>\n          <strong id=\"assetPathText\">—</strong>\n        </div>\n        <div>\n          <span>Version ID</span>\n          <strong id=\"versionText\">—</strong>\n        </div>\n        <div>\n          <span>Correlation ID</span>\n          <strong id=\"correlationText\">—</strong>\n        </div>\n      </div>\n\n      <button class=\"mr-btn\" id=\"pollBtn\">Check Process Status</button>\n      <button class=\"mr-btn ghost\" id=\"autoPollBtn\">Auto Poll Until Complete</button>\n    </section>\n\n    <section class=\"mr-panel mr-process\">\n      <h2>Processing Pipeline</h2>\n\n      <div class=\"mr-progress-wrap\">\n        <div class=\"mr-progress-bar\">\n          <div id=\"progressBar\"></div>\n        </div>\n        <div id=\"progressPercent\">0%</div>\n      </div>\n\n      <div class=\"mr-pipeline\">\n        <div class=\"pipe-node\" data-step=\"queued\">Queued</div>\n        <div class=\"pipe-node\" data-step=\"transcribing\">Transcribing</div>\n        <div class=\"pipe-node\" data-step=\"extracting\">Extracting</div>\n        <div class=\"pipe-node\" data-step=\"indexing\">Indexing</div>\n        <div class=\"pipe-node\" data-step=\"complete\">Complete</div>\n      </div>\n\n      <pre id=\"statusBox\">No processing status yet.</pre>\n    </section>\n\n    <section class=\"mr-panel mr-search\">\n      <h2>Search Moments</h2>\n\n      <div class=\"mr-searchbar\">\n        <input id=\"queryInput\" value=\"person walking\" placeholder=\"Describe a moment...\">\n        <button class=\"mr-btn primary\" id=\"searchBtn\">Search</button>\n      </div>\n\n      <div class=\"mr-hint\">\n        Try: <button data-query=\"meeting\">meeting</button>\n        <button data-query=\"person walking\">person walking</button>\n        <button data-query=\"machine learning\">machine learning</button>\n        <button data-query=\"car\">car</button>\n      </div>\n\n      <div id=\"resultSummary\">No search yet.</div>\n      <div id=\"resultsList\" class=\"mr-results\"></div>\n    </section>\n\n    <section class=\"mr-panel mr-player\">\n      <h2>Moment Playback</h2>\n      <video id=\"videoPlayer\" controls playsinline></video>\n      <div class=\"mr-player-info\" id=\"playerInfo\">Select a search result to play.</div>\n    </section>\n\n  </div>\n\n  <section class=\"mr-panel mr-log-panel\">\n    <div class=\"mr-log-head\">\n      <h2>Trace / Response Log</h2>\n      <button class=\"mr-btn ghost\" id=\"clearLogBtn\">Clear Log</button>\n    </div>\n    <pre id=\"logBox\">Ready.</pre>\n  </section>\n\n</div>\n\n<style>\n#momentry-raptor-demo{\n  --bg:#080f1f;\n  --panel:#0f172a;\n  --panel2:#111827;\n  --line:#243147;\n  --text:#e5e7eb;\n  --muted:#94a3b8;\n  --blue:#38bdf8;\n  --green:#22c55e;\n  --gold:#c08a6a;\n  --red:#ef4444;\n  max-width:1320px;\n  margin:40px auto;\n  padding:28px;\n  color:var(--text);\n  background:\n    radial-gradient(circle at top left, rgba(56,189,248,.16), transparent 30%),\n    radial-gradient(circle at top right, rgba(192,138,106,.18), transparent 34%),\n    var(--bg);\n  border-radius:28px;\n  font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Noto Sans TC\",sans-serif;\n}\n#momentry-raptor-demo *{box-sizing:border-box;}\n.mr-hero{\n  display:flex;\n  justify-content:space-between;\n  gap:20px;\n  align-items:flex-start;\n  margin-bottom:26px;\n}\n.mr-eyebrow{\n  color:var(--gold);\n  font-weight:800;\n  letter-spacing:.08em;\n  text-transform:uppercase;\n  margin-bottom:8px;\n}\n.mr-hero h1{\n  margin:0;\n  font-size:42px;\n  line-height:1.05;\n  color:#fff;\n}\n.mr-hero p{\n  margin:12px 0 0;\n  color:var(--muted);\n  max-width:720px;\n  font-size:16px;\n}\n.mr-status-pill{\n  padding:10px 16px;\n  background:rgba(56,189,248,.12);\n  border:1px solid rgba(56,189,248,.35);\n  color:#bae6fd;\n  border-radius:999px;\n  white-space:nowrap;\n  font-weight:800;\n}\n.mr-workflow{\n  display:grid;\n  grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;\n  align-items:center;\n  gap:8px;\n  margin-bottom:24px;\n}\n.mr-step{\n  min-height:86px;\n  padding:16px;\n  border:1px solid var(--line);\n  background:rgba(15,23,42,.72);\n  border-radius:20px;\n  display:grid;\n  grid-template-columns:44px 1fr;\n  column-gap:12px;\n  align-items:center;\n}\n.mr-step span{\n  width:42px;height:42px;border-radius:50%;\n  display:flex;align-items:center;justify-content:center;\n  background:#020617;border:1px solid #334155;\n  color:var(--muted);font-weight:900;\n}\n.mr-step strong{display:block;color:#fff;font-size:18px;}\n.mr-step small{color:var(--muted);}\n.mr-step.active{\n  border-color:rgba(56,189,248,.65);\n  box-shadow:0 0 0 1px rgba(56,189,248,.2), 0 18px 60px rgba(56,189,248,.08);\n}\n.mr-step.done span{background:rgba(34,197,94,.18);color:#bbf7d0;border-color:rgba(34,197,94,.45);}\n.mr-step.active span{background:rgba(56,189,248,.18);color:#bae6fd;border-color:rgba(56,189,248,.5);}\n.mr-line{height:2px;background:linear-gradient(90deg,var(--line),rgba(56,189,248,.45));}\n.mr-main{\n  min-width:0;\n  display:grid;\n  grid-template-columns:minmax(280px,360px) minmax(0,1fr);\n  gap:18px;\n}\n.mr-panel{\n  min-width:0;\n  background:rgba(15,23,42,.86);\n  border:1px solid var(--line);\n  border-radius:22px;\n  padding:20px;\n  box-shadow:0 18px 60px rgba(0,0,0,.22);\n}\n.mr-panel h2{\n  margin:0 0 16px;\n  color:#fff;\n  font-size:20px;\n}\n.mr-control{grid-row:span 2;}\n.mr-search,.mr-player{min-height:340px;}\n.mr-btn{\n  width:100%;\n  border:0;\n  border-radius:14px;\n  padding:13px 16px;\n  font-weight:900;\n  cursor:pointer;\n  background:#1e293b;\n  color:#fff;\n  margin:8px 0;\n}\n.mr-btn.primary{\n  background:linear-gradient(135deg,#38bdf8,#60a5fa);\n  color:#082f49;\n}\n.mr-btn.ghost{\n  background:transparent;\n  border:1px solid #334155;\n  color:#cbd5e1;\n}\n.mr-token-box,.mr-upload-box{margin:14px 0;}\n.mr-token-box label,.mr-upload-box label{\n  color:#cbd5e1;\n  font-size:13px;\n  font-weight:800;\n  display:block;\n  margin-bottom:8px;\n}\n#tokenInput,#videoFile,#queryInput{\n  width:100%;\n  background:#020617;\n  color:#e2e8f0;\n  border:1px solid #334155;\n  border-radius:14px;\n  padding:12px;\n}\n.mr-meta{\n  margin:16px 0;\n  display:grid;\n  gap:10px;\n}\n.mr-meta div{\n  padding:12px;\n  background:#020617;\n  border:1px solid #1f2a3d;\n  border-radius:14px;\n}\n.mr-meta span{\n  display:block;\n  color:var(--muted);\n  font-size:12px;\n  margin-bottom:4px;\n}\n.mr-meta strong{\n  color:#fff;\n  word-break:break-all;\n  font-size:13px;\n}\n.mr-progress-wrap{\n  display:flex;\n  align-items:center;\n  gap:14px;\n  margin:10px 0 18px;\n}\n.mr-progress-bar{\n  flex:1;\n  height:14px;\n  background:#020617;\n  border:1px solid #334155;\n  border-radius:999px;\n  overflow:hidden;\n}\n#progressBar{\n  width:0%;\n  height:100%;\n  background:linear-gradient(90deg,#38bdf8,#22c55e);\n  transition:.35s ease;\n}\n#progressPercent{\n  min-width:52px;\n  text-align:right;\n  font-weight:900;\n  color:#bae6fd;\n}\n.mr-pipeline{\n  display:grid;\n  grid-template-columns:repeat(5,1fr);\n  gap:10px;\n  margin-bottom:16px;\n}\n.pipe-node{\n  padding:12px 8px;\n  text-align:center;\n  border-radius:14px;\n  border:1px solid #334155;\n  background:#020617;\n  color:#94a3b8;\n  font-size:13px;\n  font-weight:800;\n}\n.pipe-node.active{\n  border-color:#38bdf8;\n  color:#bae6fd;\n  background:rgba(56,189,248,.12);\n}\n.pipe-node.done{\n  border-color:#22c55e;\n  color:#bbf7d0;\n  background:rgba(34,197,94,.12);\n}\n#statusBox,#logBox{\n  background:#020617;\n  border:1px solid #334155;\n  color:#cbd5e1;\n  border-radius:16px;\n  padding:16px;\n  white-space:pre-wrap;\n  word-break:break-word;\n  overflow-wrap:anywhere;\n  overflow:auto;\n  max-width:100%;\n  max-height:420px;\n  font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;\n  font-size:12px;\n  line-height:1.55;\n}\n.mr-searchbar{\n  display:grid;\n  grid-template-columns:1fr 140px;\n  gap:10px;\n}\n.mr-searchbar .mr-btn{margin:0;}\n.mr-hint{\n  margin:12px 0 16px;\n  color:var(--muted);\n}\n.mr-hint button{\n  border:1px solid #334155;\n  background:#020617;\n  color:#cbd5e1;\n  border-radius:999px;\n  padding:6px 10px;\n  cursor:pointer;\n  margin:3px;\n}\n#resultSummary{\n  color:#bae6fd;\n  margin-bottom:12px;\n  font-weight:800;\n}\n.mr-results{\n  display:grid;\n  gap:12px;\n}\n.result-card{\n  padding:14px;\n  border:1px solid #334155;\n  border-radius:16px;\n  background:#020617;\n  cursor:pointer;\n}\n.result-card:hover{\n  border-color:#38bdf8;\n}\n.result-card h3{\n  margin:0 0 6px;\n  color:#fff;\n  font-size:16px;\n}\n.result-card .score{\n  color:#bbf7d0;\n  font-weight:900;\n  font-size:13px;\n}\n.segment{\n  margin-top:10px;\n  padding:10px;\n  border-radius:12px;\n  background:rgba(255,255,255,.04);\n  border:1px solid rgba(255,255,255,.06);\n}\n.segment-time{\n  color:#38bdf8;\n  font-weight:900;\n  margin-bottom:4px;\n}\n.segment-text{\n  color:#cbd5e1;\n  font-size:13px;\n  line-height:1.45;\n}\n#videoPlayer{\n  width:100%;\n  min-height:280px;\n  background:#020617;\n  border:1px solid #334155;\n  border-radius:18px;\n}\n.mr-player-info{\n  margin-top:12px;\n  color:var(--muted);\n  line-height:1.5;\n}\n.mr-log-panel{\n  margin-top:18px;\n}\n.mr-log-head{\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:12px;\n}\n.mr-log-head .mr-btn{\n  width:auto;\n  padding:10px 14px;\n}\n@media(max-width:980px){\n  .mr-main{grid-template-columns:1fr;}\n  .mr-control{grid-row:auto;}\n  .mr-workflow{grid-template-columns:1fr;}\n  .mr-line{display:none;}\n  .mr-pipeline{grid-template-columns:1fr;}\n  .mr-searchbar{grid-template-columns:1fr;}\n}\n							 \n</style>\n\n<script>\n(function(){\n	const wpRestNonce = \'<?php echo esc_js(wp_create_nonce(\'wp_rest\')); ?>\';\n  const api = {\n    login: \'/wp-json/raptor-demo/v1/login\',\n    upload: \'/wp-json/raptor-demo/v1/upload\',\n    status: \'/wp-json/raptor-demo/v1/status\',\n    search: \'/wp-json/raptor-demo/v1/search\'\n  };\n\n  window.state = {\n    token: localStorage.getItem(\'raptor_demo_token\') || \'\',\n    correlationId: \'\',\n    assetPath: \'\',\n    versionId: \'\',\n    filename: \'\',\n    pollTimer: null\n  };\n\n  const $ = id => document.getElementById(id);\nwindow.renderFinderRows = window.renderFinderRows || function(){\n  console.warn(\'renderFinderRows skipped: finder UI is not used on this page.\');\n};\n  const tokenInput = $(\'tokenInput\');\n  const globalStatus = $(\'globalStatus\');\n  const logBox = $(\'logBox\');\n  const statusBox = $(\'statusBox\');\n  const progressBar = $(\'progressBar\');\n  const progressPercent = $(\'progressPercent\');\n\n  tokenInput.value = state.token;\n\n  function log(title, data){\n    const block = `\\n\\n=== ${title} ===\\n${JSON.stringify(data, null, 2)}`;\n    logBox.textContent = (logBox.textContent === \'Ready.\' ? \'\' : logBox.textContent) + block;\n    logBox.scrollTop = logBox.scrollHeight;\n  }\n\n  function setGlobal(text){\n    globalStatus.textContent = text;\n  }\n\n  function markStep(stepId){\n    [\'stepLogin\',\'stepUpload\',\'stepProcess\',\'stepSearch\'].forEach(id=>{\n      $(id).classList.remove(\'active\');\n    });\n    $(stepId).classList.add(\'active\');\n  }\n\n  function doneStep(stepId){\n    $(stepId).classList.add(\'done\');\n  }\n\n  function setProgress(step){\n    const map = {\n      queued: 15,\n      transcribing: 35,\n      extracting: 58,\n      indexing: 78,\n      complete: 100,\n      failed: 100\n    };\n\n    const normalized = String(step || \'\').toLowerCase();\n    let percent = 0;\n    Object.keys(map).forEach(k=>{\n      if(normalized.includes(k)) percent = map[k];\n    });\n\n    progressBar.style.width = percent + \'%\';\n    progressPercent.textContent = percent + \'%\';\n\n    document.querySelectorAll(\'.pipe-node\').forEach(n=>{\n      n.classList.remove(\'active\',\'done\');\n      const s = n.dataset.step;\n      if(map[s] < percent) n.classList.add(\'done\');\n      if(normalized.includes(s)) n.classList.add(\'active\');\n    });\n\n    if(normalized.includes(\'complete\')){\n      document.querySelectorAll(\'.pipe-node\').forEach(n=>n.classList.add(\'done\'));\n      doneStep(\'stepProcess\');\n      markStep(\'stepSearch\');\n    }\n  }\n\n  function extractProcessingStep(data){\n    const text = JSON.stringify(data || {}).toLowerCase();\n    if(text.includes(\'complete\')) return \'complete\';\n    if(text.includes(\'indexing\')) return \'indexing\';\n    if(text.includes(\'extracting\')) return \'extracting\';\n    if(text.includes(\'transcribing\')) return \'transcribing\';\n    if(text.includes(\'queued\')) return \'queued\';\n    if(text.includes(\'failed\')) return \'failed\';\n    return \'queued\';\n  }\n\n$(\'loginBtn\').addEventListener(\'click\', async()=>{\n  setGlobal(\'Logging in...\');\n  markStep(\'stepLogin\');\n\n  const res = await fetch(api.login, {\n    method:\'POST\',\n    credentials:\'same-origin\',\n    headers:{\n      \'X-WP-Nonce\': wpRestNonce\n    }\n  });\n\n  const raw = await res.text();\n  let data;\n\n  try {\n    data = JSON.parse(raw);\n  } catch(e) {\n    data = {\n      ok: false,\n      step: \'login\',\n      http_status: res.status,\n      message: raw || \'Empty response from login endpoint\'\n    };\n  }\n\n  log(\'LOGIN\', data);\n\n  const token = data?.data?.access_token || \'\';\n\n  if(token){\n    state.token = token;\n    tokenInput.value = token;\n    localStorage.setItem(\'raptor_demo_token\', token);\n    doneStep(\'stepLogin\');\n    markStep(\'stepUpload\');\n    setGlobal(\'Authenticated\');\n  }else{\n    setGlobal(\'Login failed\');\n  }\n});\n\n  tokenInput.addEventListener(\'input\', ()=>{\n    state.token = tokenInput.value.trim();\n    localStorage.setItem(\'raptor_demo_token\', state.token);\n  });\n\n $(\'uploadBtn\').addEventListener(\'click\', async()=>{\n  const file = $(\'videoFile\').files[0];\n  if(!state.token) return alert(\'Please login first.\');\n  if(!file) return alert(\'Please choose a video file.\');\n\n  setGlobal(\'Uploading...\');\n  markStep(\'stepUpload\');\n\n  const fd = new FormData();\n  fd.append(\'token\', state.token);\n  fd.append(\'primary_file\', file);\n\nconst res = await fetch(api.upload, {\n  method:\'POST\',\n  credentials:\'same-origin\',\n  headers:{\n    \'X-Raptor-Token\': state.token,\n    \'X-WP-Nonce\': wpRestNonce\n  },\n  body: fd\n});\n  const raw = await res.text();\n  let data;\n\ntry {\n  data = JSON.parse(raw);\n} catch(e) {\n  data = {\n    ok: false,\n    step: \'upload\',\nhttp_status: res.status,\nmessage: raw || \'Empty response from upload endpoint\'\n  };\n}\n\n  log(\'UPLOAD\', data);\n\n  const upload = data?.data?.upload_result || {};\n  const proc = data?.data?.processing_result || {};\n\n  state.filename = upload.primary_filename || file.name || \'\';\n  state.assetPath = upload.asset_path || \'\';\n  state.versionId = upload.version_id || \'\';\n  state.correlationId = proc.correlation_id || \'\';\n\n  $(\'filenameText\').textContent = state.filename || \'—\';\n  $(\'assetPathText\').textContent = state.assetPath || \'—\';\n  $(\'versionText\').textContent = state.versionId || \'—\';\n  $(\'correlationText\').textContent = state.correlationId || \'—\';\n\n  if(data.ok){\n    doneStep(\'stepUpload\');\n    markStep(\'stepProcess\');\n    setGlobal(\'Uploaded\');\n    setProgress(proc.status || \'queued\');\n    statusBox.textContent = JSON.stringify(data.data, null, 2);\n  }else{\n    setGlobal(\'Upload failed\');\n  }\n});\n\n  async function checkStatus(){\n    if(!state.token) return alert(\'Please login first.\');\n    if(!state.correlationId) return alert(\'Missing correlation_id. Upload a video first.\');\n\n    setGlobal(\'Checking status...\');\n    markStep(\'stepProcess\');\n\nconst res = await fetch(api.status, {\n  method:\'POST\',\n  credentials:\'same-origin\',\n  headers:{\n    \'Content-Type\':\'application/json\',\n    \'X-WP-Nonce\': wpRestNonce\n  },\n  body: JSON.stringify({\n    token: state.token,\n    correlation_id: state.correlationId\n  })\n});\n\n    const data = await res.json();\n    log(\'STATUS\', data);\n    statusBox.textContent = JSON.stringify(data, null, 2);\n\n    const step = extractProcessingStep(data);\n    setProgress(step);\n\n    if(step === \'complete\'){\n      setGlobal(\'Processing complete\');\n      if(state.pollTimer){\n        clearInterval(state.pollTimer);\n        state.pollTimer = null;\n      }\n    }else if(step === \'failed\'){\n      setGlobal(\'Processing failed\');\n      if(state.pollTimer){\n        clearInterval(state.pollTimer);\n        state.pollTimer = null;\n      }\n    }else{\n      setGlobal(\'Processing: \' + step);\n    }\n  }\n\n  $(\'pollBtn\').addEventListener(\'click\', checkStatus);\n\n  $(\'autoPollBtn\').addEventListener(\'click\', ()=>{\n    if(state.pollTimer){\n      clearInterval(state.pollTimer);\n      state.pollTimer = null;\n      setGlobal(\'Auto poll stopped\');\n      return;\n    }\n    checkStatus();\n    state.pollTimer = setInterval(checkStatus, 15000);\n    setGlobal(\'Auto polling every 15s\');\n  });\n\n  $(\'searchBtn\').addEventListener(\'click\', async()=>{\n    if(!state.token) return alert(\'Please login first.\');\n\n    const query = $(\'queryInput\').value.trim();\n    if(!query) return alert(\'Please enter query.\');\n\n    setGlobal(\'Searching...\');\n    markStep(\'stepSearch\');\n\nconst res = await fetch(api.search, {\n  method:\'POST\',\n  credentials:\'same-origin\',\n  headers:{\n    \'Content-Type\':\'application/json\',\n    \'X-WP-Nonce\': wpRestNonce\n  },\n  body: JSON.stringify({\n    token: state.token,\n    query,\n    top_k: 5\n  })\n});\n\n    const data = await res.json();\n    log(\'SEARCH\', data);\n    renderResults(data);\n\n    if(data.ok){\n      doneStep(\'stepSearch\');\n      setGlobal(\'Search complete\');\n    }else{\n      setGlobal(\'Search failed\');\n    }\n  });\n\n  document.querySelectorAll(\'[data-query]\').forEach(btn=>{\n    btn.addEventListener(\'click\', ()=>{\n      $(\'queryInput\').value = btn.dataset.query;\n    });\n  });\nfunction extractBlock(text, key){\n  const re = new RegExp(key + \':\\\\{([\\\\s\\\\S]*?)\\\\}(?=\\\\s*/\\\\s*(ocr|asr|lvlm|contextual):|$)\', \'i\');\n  const m = String(text || \'\').match(re);\n  return m ? m[1].trim() : \'\';\n}\n\nfunction formatTime(sec){\n  sec = Number(sec || 0);\n  const m = Math.floor(sec / 60);\n  const s = Math.floor(sec % 60);\n  return `${m}:${String(s).padStart(2,\'0\')}`;\n}\n  function renderResults(data){\n  const list = $(\'resultsList\');\n  list.innerHTML = \'\';\n\n  const results = data?.data?.results || [];\n  const total = data?.data?.total ?? 0;\n\n  $(\'resultSummary\').textContent = `Found ${total} video(s). Latency: ${data.latency_ms || \'-\'} ms`;\n\n  if(!results.length){\n    list.innerHTML = \'<div class=\"result-card\"><h3>No results</h3><div class=\"segment-text\">Try another query, or confirm the video has completed processing.</div></div>\';\n    return;\n  }\n\n  results.forEach((video, idx)=>{\n    const card = document.createElement(\'div\');\n    card.className = \'result-card\';\n\n    const seg = (video.segments || [])[0] || {};\n    const start = Number(seg.start_time || 0);\n    const end = Number(seg.end_time || 0);\n\n    const contextual = extractBlock(seg.text, \'contextual\');\n    const asr = extractBlock(seg.text, \'asr\');\n    const lvlm = extractBlock(seg.text, \'lvlm\');\n    const summary = contextual || lvlm || asr || \'This moment matches your search.\';\n    const scorePct = Math.round(Number(seg.score || video.score || 0) * 100);\n\n    card.innerHTML = `\n      <h3>${idx+1}. ${escapeHtml(video.filename || video.video_id || \'Untitled video\')}</h3>\n      <div class=\"score\">Match ${scorePct}% · ${formatTime(start)} – ${formatTime(end)}</div>\n\n      <div class=\"segment\">\n        <div class=\"segment-time\">AI Moment Summary</div>\n        <div class=\"segment-text\">${escapeHtml(summary)}</div>\n        <div class=\"segment-text\" style=\"margin-top:10px;color:#94a3b8;\">\n          Matched by: ${escapeHtml((seg.sources || []).join(\' + \') || \'AI Search\')}\n        </div>\n      </div>\n    `;\n\n    card.addEventListener(\'click\', ()=>{\n      playVideo(video.asset_url, start, video.filename, seg);\n    });\n\n    list.appendChild(card);\n  });\n}\n\n  function playVideo(url, start, filename, seg){\n  if(!url){\n    $(\'playerInfo\').textContent = \'No asset_url returned.\';\n    return;\n  }\n\n  const player = $(\'videoPlayer\');\nconst proxyUrl = \'/?raptor_video_proxy=1&url=\' + encodeURIComponent(url);\nplayer.pause();\nplayer.removeAttribute(\'src\');\nplayer.load();\n\nplayer.src = proxyUrl + \'&_=\' + Date.now();\nplayer.preload = \'metadata\';\nplayer.controls = true;\nplayer.load();\n\nplayer.onloadedmetadata = () => {\n  console.log(\'video metadata loaded\', player.duration);\n\n  try {\n    player.currentTime = Number(start || 0);\n  } catch(e) {\n    console.warn(\'seek failed:\', e);\n  }\n};\n\nplayer.oncanplay = () => {\n  console.log(\'video can play\');\n};\n\nplayer.onerror = () => {\n  console.error(\'video error:\', player.error);\n};\n\n  const contextual = extractBlock(seg.text, \'contextual\');\n  const asr = extractBlock(seg.text, \'asr\');\n  const lvlm = extractBlock(seg.text, \'lvlm\');\n  const cleanSummary = contextual || lvlm || asr || \'This moment matches your search.\';\n\n  $(\'playerInfo\').innerHTML = `\n    <strong>${escapeHtml(filename || \'Video\')}</strong><br>\n    <span style=\"color:#38bdf8;font-weight:800;\">\n      Jump to ${formatTime(start || 0)}\n    </span><br>\n    <span>${escapeHtml(cleanSummary)}</span>\n  `;\n}\n\n  function escapeHtml(str){\n    return String(str || \'\')\n      .replaceAll(\'&\',\'&amp;\')\n      .replaceAll(\'<\',\'&lt;\')\n      .replaceAll(\'>\',\'&gt;\')\n      .replaceAll(\'\"\',\'&quot;\')\n      .replaceAll(\"\'\",\"&#039;\");\n  }\n\n  $(\'clearLogBtn\').addEventListener(\'click\', ()=>{\n    logBox.textContent = \'Ready.\';\n  });\n\n})();\n</script>\n\n<?php\nreturn ob_get_clean();\n});','四流程 Demo','global',0,10,1,'2026-05-27 02:06:28',1,NULL),
(69,'Create Momentry API Logs Table','<p>抓完 Log 後的顯示表格</p>','global $wpdb;\n\n$table = $wpdb->prefix . \'momentry_api_logs\';\n\n$sql = \"CREATE TABLE IF NOT EXISTS $table (\n  id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,\n  trace_id VARCHAR(64),\n  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n\n  user_id BIGINT NULL,\n  user_login VARCHAR(100) NULL,\n\n  method VARCHAR(10),\n\n  page_source VARCHAR(100) NULL,\n\n  path TEXT,\n  request_body LONGTEXT,\n  response_body LONGTEXT,\n\n  http_code INT,\n  latency_ms INT,\n\n  success TINYINT(1),\n\n  error_message TEXT\n)\";\n\nrequire_once ABSPATH . \'wp-admin/includes/upgrade.php\';\n\ndbDelta($sql);\n\n/* 新增欄位（舊 table 升級用） */\n\n$columns = $wpdb->get_col(\"SHOW COLUMNS FROM $table\");\n\nif (!in_array(\'user_id\', $columns)) {\n  $wpdb->query(\"ALTER TABLE $table ADD user_id BIGINT NULL\");\n}\n\nif (!in_array(\'user_login\', $columns)) {\n  $wpdb->query(\"ALTER TABLE $table ADD user_login VARCHAR(100) NULL\");\n}\n\nif (!in_array(\'page_source\', $columns)) {\n  $wpdb->query(\"ALTER TABLE $table ADD page_source VARCHAR(100) NULL\");\n}\n\necho \'Momentry API Logs table ready.\';','抓完 Log 後的顯示表格','global',0,10,1,'2026-05-27 02:06:12',1,NULL),
(70,'Momentry API Logs Page','<p>用這個來抓 Log</p>','add_shortcode(\'momentry_api_logs\', function () {\n  global $wpdb;\n\n  $table = $wpdb->prefix . \'momentry_api_logs\';\n\n  if (isset($_GET[\'clear_logs\']) && current_user_can(\'manage_options\')) {\n\n    $wpdb->query(\"TRUNCATE TABLE $table\");\n\n    echo \'\n    <div style=\"\n      padding:12px;\n      background:#dcfce7;\n      border:1px solid #86efac;\n      border-radius:12px;\n      margin-bottom:20px;\n    \">\n      Logs cleared.\n    </div>\';\n  }\n\n$per_page = 50;\n$status = sanitize_text_field($_GET[\'status\'] ?? \'\');\n\n$where = \'WHERE 1=1\';\n\nif ($status === \'success\') {\n  $where .= \' AND success = 1\';\n}\n\nif ($status === \'fail\') {\n  $where .= \' AND success = 0\';\n}\n$page = max(1, intval($_GET[\'log_page\'] ?? 1));\n$offset = ($page - 1) * $per_page;\n\n$total = (int) $wpdb->get_var(\n\"SELECT COUNT(*) FROM $table $where\");\n\n$total_pages = max(1, ceil($total / $per_page));\n\n$logs = $wpdb->get_results(\n  $wpdb->prepare(\n    \"SELECT * FROM $table $where ORDER BY id DESC LIMIT %d OFFSET %d\",\n    $per_page,\n    $offset\n  ),\n  ARRAY_A\n);\n\n  ob_start();\n  ?>\n\n  <div class=\"ms-api-logs\">\n    <h2>Momentry API Logs</h2>\n<div style=\"\n  display:flex;\n  justify-content:flex-end;\n  align-items:center;\n  margin:0 0 18px 0;\n\">\n\n  <div style=\"display:flex;align-items:center;gap:8px;\">\n\n    <a href=\"?\"\n       style=\"\n         padding:8px 12px;\n         border-radius:12px;\n         background:<?php echo $status === \'\' ? \'#e0ecff\' : \'#f8fafc\'; ?>;\n         color:<?php echo $status === \'\' ? \'#2563eb\' : \'#64748b\'; ?>;\n         border:1px solid <?php echo $status === \'\' ? \'#bfdbfe\' : \'#e2e8f0\'; ?>;\n         text-decoration:none;\n         font-size:13px;\n         font-weight:700;\n       \">\n      All\n    </a>\n\n    <a href=\"?status=success\"\n       style=\"\n         padding:8px 12px;\n         border-radius:12px;\n         background:<?php echo $status === \'success\' ? \'#dcfce7\' : \'#f8fafc\'; ?>;\n         color:<?php echo $status === \'success\' ? \'#15803d\' : \'#64748b\'; ?>;\n         border:1px solid <?php echo $status === \'success\' ? \'#86efac\' : \'#e2e8f0\'; ?>;\n         text-decoration:none;\n         font-size:13px;\n         font-weight:700;\n       \">\n      Success ✓\n    </a>\n\n    <a href=\"?status=fail\"\n       style=\"\n         padding:8px 12px;\n         border-radius:12px;\n         background:<?php echo $status === \'fail\' ? \'#fee2e2\' : \'#f8fafc\'; ?>;\n         color:<?php echo $status === \'fail\' ? \'#dc2626\' : \'#64748b\'; ?>;\n         border:1px solid <?php echo $status === \'fail\' ? \'#fecaca\' : \'#e2e8f0\'; ?>;\n         text-decoration:none;\n         font-size:13px;\n         font-weight:700;\n       \">\n      Failed ✕\n    </a>\n\n    <a href=\"?clear_logs=1\"\n       onclick=\"return confirm(\'Clear all API logs?\')\"\n       style=\"\n         display:inline-flex;\n         align-items:center;\n         justify-content:center;\n         padding:8px 14px;\n         background:#f8fafc;\n         color:#64748b;\n         border:1px solid #e2e8f0;\n         border-radius:12px;\n         text-decoration:none;\n         font-size:13px;\n         font-weight:700;\n       \">\n       Clear Logs\n    </a>\n\n  </div>\n\n</div>\n    <table>\n      <thead>\n        <tr>\n          <th>ID</th>\n          <th>Time</th>\n	  <th>User</th>\n<th>Page</th>\n          <th>Method</th>\n          <th>Path</th>\n          <th>Code</th>\n          <th>Latency</th>\n          <th>Status</th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <?php foreach ($logs as $log): ?>\n          <tr class=\"ms-log-row\" data-id=\"<?php echo esc_attr($log[\'id\']); ?>\">\n            <td><?php echo esc_html($log[\'id\']); ?></td>\n            <td><?php echo esc_html($log[\'created_at\']); ?></td>\n			<td><?php echo esc_html($log[\'user_login\']); ?></td>\n\n<td><?php echo esc_html($log[\'page_source\']); ?></td>\n            <td><?php echo esc_html($log[\'method\']); ?></td>\n           <td class=\"ms-log-path-short\">\n  <?php\n$short_path = preg_replace(\n  \'/[a-f0-9]{32,}/i\',\n  \'{uuid}\',\n  $log[\'path\']\n);\n\n$short_path = mb_strimwidth($short_path, 0, 42, \'...\');    echo esc_html($short_path);\n  ?>\n</td>\n            <td><?php echo esc_html($log[\'http_code\']); ?></td>\n            <td><?php echo esc_html($log[\'latency_ms\']); ?> ms</td>\n            <td><?php echo !empty($log[\'success\']) ? \'✅\' : \'❌\'; ?></td>\n          </tr>\n\n          <tr class=\"ms-log-detail\" id=\"detail-<?php echo esc_attr($log[\'id\']); ?>\" style=\"display:none;\">\n            <td colspan=\"7\">\n              <div class=\"ms-log-detail-box\">\n                <h4>Trace ID</h4>\n                <pre><?php echo esc_html($log[\'trace_id\']); ?></pre>\n<h4>Path</h4>\n<pre><?php echo esc_html($log[\'path\']); ?></pre>\n                <h4>Request Body</h4>\n                <pre><?php echo esc_html($log[\'request_body\']); ?></pre>\n\n                <h4>Response Body</h4>\n                <pre><?php echo esc_html($log[\'response_body\']); ?></pre>\n\n                <?php if (!empty($log[\'error_message\'])): ?>\n                  <h4>Error</h4>\n                  <pre><?php echo esc_html($log[\'error_message\']); ?></pre>\n                <?php endif; ?>\n              </div>\n            </td>\n          </tr>\n        <?php endforeach; ?>\n      </tbody>\n    </table>\n  </div>\n\n  <style>\n			.ms-log-path-short{\n  line-height:1.45;\n  max-height:42px;\n  overflow:hidden;\n}\n    .ms-api-logs{\n  width:100%;\n  max-width:100%;\n  overflow-x:hidden;\n}\n\n.ms-api-logs table{\n  width:100%;\n  table-layout:fixed;\n}\n\n.ms-api-logs th,\n.ms-api-logs td{\n  word-break:break-word;\n  overflow-wrap:anywhere;\n}\n\n.ms-api-logs td{\n  max-width:0;\n}\n\n.ms-log-detail td{\n  overflow:hidden;\n}\n\n.ms-log-detail-box{\n  width:100%;\n  max-width:100%;\n  overflow:hidden;\n}\n\n.ms-log-detail-box pre{\n  width:100%;\n  max-width:100%;\n\n  overflow:auto;\n  overflow-wrap:anywhere;\n  word-break:break-word;\n\n  white-space:pre-wrap;\n\n  box-sizing:border-box;\n}\n\n@media(max-width:980px){\n\n  .ms-api-logs{\n    padding:14px;\n  }\n\n  .ms-api-logs h2{\n    font-size:22px;\n  }\n\n  .ms-api-logs table,\n  .ms-api-logs thead,\n  .ms-api-logs tbody,\n  .ms-api-logs tr,\n  .ms-api-logs td,\n  .ms-api-logs th{\n    display:block;\n  }\n\n  .ms-api-logs thead{\n    display:none;\n  }\n\n  .ms-log-row{\n    border-bottom:1px solid #e5e7eb;\n    padding:10px 0;\n  }\n\n  .ms-log-row td{\n    display:flex;\n    justify-content:space-between;\n    gap:10px;\n\n    padding:8px 0;\n    border:0;\n  }\n\n  .ms-log-row td::before{\n    font-weight:800;\n    color:#64748b;\n    min-width:90px;\n  }\n\n  .ms-log-row td:nth-child(1)::before{content:\"ID\";}\n  .ms-log-row td:nth-child(2)::before{content:\"Time\";}\n  .ms-log-row td:nth-child(3)::before{content:\"Method\";}\n  .ms-log-row td:nth-child(4)::before{content:\"Path\";}\n  .ms-log-row td:nth-child(5)::before{content:\"Code\";}\n  .ms-log-row td:nth-child(6)::before{content:\"Latency\";}\n  .ms-log-row td:nth-child(7)::before{content:\"Status\";}\n\n  .ms-log-detail td{\n    padding:0 0 16px;\n  }\n}\n\n    .ms-api-logs h2{\n      margin:0 0 20px;\n      font-size:28px;\n      color:#111827;\n    }\n\n    .ms-api-logs table{\n      width:100%;\n      border-collapse:collapse;\n      background:#fff;\n      border-radius:16px;\n      overflow:hidden;\n      box-shadow:0 12px 32px rgba(15,23,42,.08);\n    }\n\n    .ms-api-logs th,\n    .ms-api-logs td{\n      padding:12px 14px;\n      border-bottom:1px solid #e5e7eb;\n      font-size:13px;\n      text-align:left;\n      vertical-align:top;\n    }\n\n    .ms-api-logs th{\n      background:#f8fafc;\n      font-weight:800;\n      color:#475569;\n    }\n\n    .ms-api-logs td{\n      color:#111827;\n    }\n\n    .ms-log-row{\n      cursor:pointer;\n    }\n\n    .ms-log-row:hover{\n      background:#f8fafc;\n    }\n\n    .ms-log-detail-box{\n      background:#0f172a;\n      color:#e2e8f0;\n      border-radius:14px;\n      padding:18px;\n    }\n\n    .ms-log-detail-box h4{\n      margin:14px 0 8px;\n      color:#fff;\n      font-size:14px;\n    }\n\n    .ms-log-detail-box h4:first-child{\n      margin-top:0;\n    }\n\n    .ms-log-detail-box pre{\n      white-space:pre-wrap;\n      overflow:auto;\n      background:#020617;\n      color:#cbd5e1;\n      padding:12px;\n      border-radius:10px;\n      font-size:12px;\n      line-height:1.5;\n    }\n	\n  </style>\n\n  <script>\n    document.querySelectorAll(\'.ms-log-row\').forEach(function(row){\n      row.addEventListener(\'click\', function(){\n        var id = row.dataset.id;\n        var detail = document.getElementById(\'detail-\' + id);\n        if (!detail) return;\n\n        detail.style.display =\n          detail.style.display === \'none\' ? \'table-row\' : \'none\';\n      });\n    });\n  </script>\n<div style=\"margin-top:20px;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;\">\n\n  <?php if ($page > 1): ?>\n    <a href=\"?log_page=<?php echo $page - 1; ?>\"\n       style=\"padding:8px 14px;border-radius:10px;background:#1e293b;color:#fff;text-decoration:none;\">\n      ‹ Prev\n    </a>\n  <?php endif; ?>\n\n  <?php\n  for ($i = 1; $i <= $total_pages; $i++) :\n\n    $active = ($i === $page);\n\n    $bg = $active ? \'#2563eb\' : \'#1e293b\';\n  ?>\n\n    <a href=\"?status=<?php echo urlencode($status); ?>&log_page=<?php echo $i; ?>\"\n       style=\"\n         padding:8px 14px;\n         border-radius:10px;\n         background:<?php echo $bg; ?>;\n         color:#fff;\n         text-decoration:none;\n         min-width:40px;\n         text-align:center;\n       \">\n      <?php echo $i; ?>\n    </a>\n\n  <?php endfor; ?>\n\n  <?php if ($page < $total_pages): ?>\n    <a href=\"?log_page=<?php echo $page + 1; ?>\"\n       style=\"padding:8px 14px;border-radius:10px;background:#1e293b;color:#fff;text-decoration:none;\">\n      Next ›\n    </a>\n  <?php endif; ?>\n\n</div>\n  <?php\n  return ob_get_clean();\n});','用這個來抓 Log','global',0,10,1,'2026-05-28 02:53:51',1,NULL),
(71,'圖片代理器（image proxy）','<p>透過這個才能用 本地路徑顯示圖</p>','add_action(\'init\', function () {\n  if (empty($_GET[\'ms_local_image\'])) {\n    return;\n  }\n\n  $file = rawurldecode($_GET[\'ms_local_image\']);\n\n  $allowed_dir = \'/Users/accusys/momentry/var/sftpgo/data/demo/\';\n  $real_file = realpath($file);\n\n  if (!$real_file || strpos($real_file, realpath($allowed_dir)) !== 0 || !file_exists($real_file)) {\n    status_header(404);\n    exit(\'Image not found\');\n  }\n\n  header(\'Content-Type: \' . mime_content_type($real_file));\n  header(\'Content-Length: \' . filesize($real_file));\n  readfile($real_file);\n  exit;\n});','透過這個才能用 本地路徑顯示圖','global',0,10,1,'2026-05-27 02:05:34',1,NULL),
(72,'People – Frontend JS','','add_action(\'wp_footer\', function() {\n  if (strpos($_SERVER[\'REQUEST_URI\'], \'people\') === false) return;\n  ?>\n  <script>\n\n(function () {\n  \'use strict\';\n\n	// ── 設定 (修正版：100% 全面後端代理) ───────────────────────────\n	// 🔒 已移除真實 API_BASE 與 API_KEY，前端不再暴露任何後台連線資訊\n\n	var PROXY_BASE = \'/wp-json/momentry/v1/proxy\'; // ✅ 寫入類/一般資料抓取走 WP REST proxy\n	var PAGE_SIZE  = 30;\n\n	var wpRestNonce = (window.wpRestNonce || \'\');  // ✅ 寫入類 API 必備的安全令牌\n\n  // ── SVG 常數 ──────────────────────────────────────────────────\n  var SILHOUETTE_SVG = \'<svg class=\"ms-silhouette\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100\" height=\"100\" fill=\"#e8eaed\"/><circle cx=\"50\" cy=\"36\" r=\"18\" fill=\"#bdc1c6\"/><ellipse cx=\"50\" cy=\"90\" rx=\"30\" ry=\"22\" fill=\"#bdc1c6\"/></svg>\';\n\n  if (window.location.pathname.indexOf(\'people\') === -1) return;\n\n  // ── API helpers ───────────────────────────────────────────────\n\n  // ✅ apiFetch：透過 PROXY_BASE 轉接\n  function apiFetch(path) {\n  var startedAt = Date.now();\n  return fetch(PROXY_BASE + path, {\n    credentials: \'same-origin\',\n    headers: {\'X-WP-Nonce\': wpRestNonce}\n  }).then(function(r) {\n    var status = r.status;\n    return r.text().then(function(text) {\n      var data = null;\n      try { data = JSON.parse(text); } catch(e) { data = text; }\n      // Log 紀錄\n	  fetch(window.location.origin + \'/wp-json/momentry/v1/people-log\', {\n        method: \'POST\',\n        credentials: \'same-origin\',\n        headers: { \'Content-Type\': \'application/json\',\n            \'X-WP-Nonce\': wpRestNonce },\n        body: JSON.stringify({\n          method: \'GET\', path: \'People frontend apiFetch → \' + path,\n          request_body: { path: path }, response_body: data,\n          http_code: status, latency_ms: Date.now() - startedAt,\n          success: r.ok, error_message: r.ok ? \'\' : String(status)\n        })\n      }).catch(function(){});\n      if (!r.ok) return Promise.reject(status);\n      return data;\n    });\n  });\n}\n\n  // ✅ PATCH\n  function apiPatch(path, body) {\n  return fetch(\'/wp-json/momentry/v1/proxy\' + path, {\n    method: \'PATCH\',\n    credentials: \'same-origin\',\n    headers: { \'Content-Type\': \'application/json\', \'X-WP-Nonce\': wpRestNonce },\n    body: JSON.stringify(body),\n  }).then(function(r) {\n    if (!r.ok) return Promise.reject(r.status);\n    return r.status === 204 ? {} : r.json().catch(function() { return {}; });\n  });\n}\n\n  // ✅ POST\n  function apiPost(path, body) {\n  return fetch(\'/wp-json/momentry/v1/proxy\' + path, {\n    method: \'POST\',\n    credentials: \'same-origin\',\n    headers: { \'Content-Type\': \'application/json\', \'X-WP-Nonce\': wpRestNonce },\n    body: JSON.stringify(body),\n  }).then(function(r) {\n    return r.ok ? r.json() : Promise.reject(r.status);\n  });\n}\n\n  // ✅ DELETE：\n  function apiDelete(path) {\n  return fetch(\'/wp-json/momentry/v1/proxy\' + path, {\n    method: \'DELETE\',\n    credentials: \'same-origin\',\n    headers: {\'X-WP-Nonce\': wpRestNonce},\n  }).then(function(r) {\n    return r.ok ? (r.status === 204 ? {} : r.json()) : Promise.reject(r.status);\n  });\n}\n\n	\n	\n  function buildMetadataPatch(person) {\n    return {\n      role:           person.role    || \'\',\n      notes:          person.notes   || \'\',\n      aliases:        person.aliases || [],\n      starred:        !!person.isStarred,\n      user_confirmed: !!person.userConfirmed,\n      user_skipped:   !!person.userSkipped,\n    };\n  }\n\n  function toggleStarAndSave(person) {\n    if (!person) return;\n    person.isStarred = !person.isStarred;\n    syncDetailStarBtns(person);\n    renderGrid();\n    apiPatch(\'/identity/\' + person.id, {\n      metadata: buildMetadataPatch(person),\n    }).then(function () {\n    }).catch(function (e) {\n      person.isStarred = !person.isStarred;\n      console.warn(\'ms-people: PATCH starred 失敗\', e);\n      syncDetailStarBtns(person);\n      renderGrid();\n    });\n  }\n\n  function throttledPool(factories, limit) {\n    return new Promise(function (resolve) {\n      var results = [], idx = 0, running = 0, total = factories.length;\n      if (!total) { resolve(results); return; }\n      function next() {\n        while (running < limit && idx < total) {\n          (function (i) {\n            running++;\n            factories[i]().catch(function () { return null; }).then(function (val) {\n              results[i] = val; running--;\n              if (idx >= total && running === 0) resolve(results); else next();\n            });\n          })(idx++);\n        }\n      }\n      next();\n    });\n  }\n\n  function clearPersonCache(person) {\n    if (!person) return;\n    (person.face_members || []).forEach(function (fm) {\n      if (fm.thumb && fm.thumb.startsWith(\'blob:\')) { URL.revokeObjectURL(fm.thumb); fm.thumb = null; }\n    });\n    if (person.thumb && person.thumb.startsWith(\'blob:\')) { URL.revokeObjectURL(person.thumb); person.thumb = null; }\n    delete _detailCache[person.id];\n  }\n\n  var SS_KEY = \'ms_ppl_draft\';\n  function saveDraft(person) {\n    if (!person) return;\n    try { sessionStorage.setItem(SS_KEY, JSON.stringify({ id: person.id, name: getVal(\'msPplEditName\') || person.name, role: getVal(\'msPplEditRole\'), notes: getVal(\'msPplEditNotes\'), aliases: state.currentAliases.slice(), isStarred: !!person.isStarred })); } catch (e) {}\n  }\n  function loadDraft() { try { var r = sessionStorage.getItem(SS_KEY); return r ? JSON.parse(r) : null; } catch (e) { return null; } }\n  function clearDraft() { try { sessionStorage.removeItem(SS_KEY); } catch (e) {} }\n  function applyDraftIfMatch(person) {\n    var draft = loadDraft();\n    if (!draft || draft.id !== person.id) return false;\n    person.name = draft.name || person.name; person.role = draft.role; person.notes = draft.notes;\n    person.aliases = Array.isArray(draft.aliases) ? draft.aliases : [];\n    if (draft.isStarred !== undefined) person.isStarred = draft.isStarred;\n    return true;\n  }\n\n  var knownPeople   = [];\n  var pendingPeople = [];\n  var skippedPeople = [];\n  window._msPpl = { knownPeople: knownPeople, pendingPeople: pendingPeople, skippedPeople: skippedPeople };\n\n  var _unnamedCount = 0;\n  var _detailCache  = {};\n  var knownPage     = 1;\n  var pendingPage   = 1;\n\n  var state = {\n    showStarred: false, searchQuery: \'\', sortMode: \'name\',\n    currentPerson: null, editMode: false, currentAliases: [],\n    ctxFmId: null, mergeSource: null, mergeTarget: null,\n    mergeFromDetail: false, ctxCardPerson: null, isDirty: false,\n    promoteMode: false,\n  };\n  window._msState = state;\n\n  window.MS_PPL_IS_DIRTY = function () { return state.isDirty; };\n  window.MS_PPL_SHOW_DIRTY_LEAVE = function (onLeave) {\n    showDirtyLeaveModal(\n      function () {\n        var p = state.currentPerson; if (!p) { onLeave(); return; }\n        p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n        saveDraft(p);\n        apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) })\n          .then(function () { clearDraft(); }).catch(function (e) { console.warn(\'ms-people: PATCH 失敗\', e); });\n        state.isDirty = false; hideModal(\'msPplDirtyLeaveModal\'); onLeave();\n      },\n      function () { state.isDirty = false; clearDraft(); hideModal(\'msPplDirtyLeaveModal\'); onLeave(); }\n    );\n  };\n\n  function buildPerson(item) {\n    var starred       = !!(item.metadata && item.metadata.starred);\n    var userConfirmed = !!(item.metadata && item.metadata.user_confirmed);\n    var userSkipped   = !!(item.metadata && item.metadata.user_skipped);\n    return {\n      id: item.identity_uuid, name: item.name || \'\',\n      thumb: null, isNew: false,\n      isStarred: starred, userConfirmed: userConfirmed, userSkipped: userSkipped,\n      aliases: item.metadata && Array.isArray(item.metadata.aliases) ? item.metadata.aliases.map(function (a) {\n        if (typeof a === \'string\') return { locale: \'zh-TW\', name: a };\n        return { locale: a.locale || \'zh-TW\', name: a.name || a.value || \'\' };\n      }).filter(function (a) { return a.name; }) : [],\n      role:  item.metadata && item.metadata.role  ? item.metadata.role  : \'\',\n      notes: item.metadata && item.metadata.notes ? item.metadata.notes : \'\',\n      status: item.status || \'pending\',\n      addedAt: item.created_at ? new Date(item.created_at) : new Date(),\n      lastViewed: null, face_members: [], media: [],\n      _apiId: item.id, _isSystem: !item.name || item.name.indexOf(\'PERSON_\') === 0 || item.name.toLowerCase().indexOf(\'stranger_\') === 0,\n      _metaLoaded: true,\n    };\n  }\n\n  function ingestRaw(rawList) {\n    rawList.forEach(function (item) {\n      var allLists = knownPeople.concat(pendingPeople).concat(skippedPeople);\n      if (allLists.some(function (p) { return p.id === item.identity_uuid; })) return;\n      var person = buildPerson(item);\n      if (person.userConfirmed) { person.status = \'confirmed\'; knownPeople.push(person); }\n      else if (person.userSkipped) { person.status = \'skipped\'; skippedPeople.push(person); }\n      else { person._pendingLabel = \'未命名 #\' + String(++_unnamedCount).padStart(2, \'0\'); pendingPeople.push(person); }\n    });\n  }\n\n  ingestRaw(window.MS_IDENTITIES_PAGE1 || []);\n\n  (function loadRemainingPages() {\n    var total = window.MS_IDENTITIES_PAGES || 1;\n    if (total <= 1) return;\n    var promises = [];\n    for (var p = 2; p <= total; p++) { promises.push(apiFetch(\'/identities?page=\' + p + \'&page_size=50\')); }\n    Promise.all(promises).then(function (results) {\n      results.forEach(function (body) { if (body && Array.isArray(body.identities)) ingestRaw(body.identities); });\n      renderGrid();\n    }).catch(function (e) { console.warn(\'ms-people: 分頁載入失敗\', e); });\n  })();\n\n  function formatSecs(secs) {\n    if (!secs && secs !== 0) return \'\';\n    var s = Math.round(secs), h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;\n    if (h > 0) return h + \':\' + String(m).padStart(2, \'0\') + \':\' + String(sec).padStart(2, \'0\');\n    return m + \':\' + String(sec).padStart(2, \'0\');\n  }\n\n  function cleanFileName(raw) {\n    if (!raw) return \'—\';\n    var parts = raw.split(\'/\');\n    return parts[parts.length - 1].replace(/\\.[^.]+$/, \'\');\n  }\n\n  function makeImg(src) {\n    var img = document.createElement(\'img\');\n    img.src = src;\n    img.onerror = function () { if (this.parentNode) this.parentNode.innerHTML = SILHOUETTE_SVG; };\n    return img;\n  }\n\n  function showView(id) {\n    document.querySelectorAll(\'.ms-ppl-view\').forEach(function (v) { v.classList.toggle(\'active\', v.id === id); });\n    var isListView = id === \'msPplViewList\';\n    [\'msPplUnboundHr\', \'msPplUnboundTitle\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (elId) {\n      var el = document.getElementById(elId); if (el) el.style.display = isListView ? \'\' : \'none\';\n    });\n    var skippedSec = document.getElementById(\'msPplSkippedSection\');\n    if (skippedSec) {\n      if (!isListView) { skippedSec.style.display = \'none\'; }\n      else { var ts = document.getElementById(\'msPplToggleSkipped\'); skippedSec.style.display = (ts && ts.getAttribute(\'data-active\') === \'true\') ? \'\' : \'none\'; }\n    }\n  }\n\n  function showModal(id) { var el = document.getElementById(id); if (el) el.classList.add(\'show\'); }\n  function hideModal(id) { var el = document.getElementById(id); if (el) el.classList.remove(\'show\'); }\n  function setText(id, v) { var el = document.getElementById(id); if (el) el.textContent = v || \'—\'; }\n  function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v || \'\'; }\n  function getVal(id) { var el = document.getElementById(id); return el ? el.value.trim() : \'\'; }\n\n  function showCtxMenu(x, y) {\n    var menu = document.getElementById(\'msPplCtxMenu\'); if (!menu) return;\n    menu.classList.add(\'show\');\n    menu.style.left = ((x + 150 > window.innerWidth) ? x - 150 : x) + \'px\';\n    menu.style.top  = ((y + 80  > window.innerHeight) ? y - 80  : y) + \'px\';\n  }\n  function hideCtxMenu()        { var m = document.getElementById(\'msPplCtxMenu\');        if (m) m.classList.remove(\'show\'); }\n  function hideCardCtxMenu()    { var m = document.getElementById(\'msPplCardCtxMenu\');    if (m) m.classList.remove(\'show\'); }\n  function hidePendingCtxMenu() { var m = document.getElementById(\'msPplPendingCtxMenu\'); if (m) m.classList.remove(\'show\'); }\n\n  var _dirtyLeaveCallback = null, _dirtyDiscardCallback = null;\n  function showDirtyLeaveModal(onSave, onLeave) { _dirtyLeaveCallback = { onSave: onSave, onLeave: onLeave }; showModal(\'msPplDirtyLeaveModal\'); }\n  function showDirtyDiscardModal(onDiscard) { _dirtyDiscardCallback = onDiscard; showModal(\'msPplDirtyDiscardModal\'); }\n\n  function openVideoPlayer(fileUuid, segments, currentIdx) {\n    var modal = document.getElementById(\'msPplVideoModal\');\n    var videoEl = document.getElementById(\'msPplVideoEl\');\n    var loadingEl = document.getElementById(\'msPplVideoLoading\');\n    var segInfoEl = document.getElementById(\'msPplVideoSegInfo\');\n    if (!modal || !videoEl) return;\n\n    modal._fileUuid = fileUuid; modal._segments = segments; modal._currentIdx = currentIdx;\n\n    function updateDots(activeIdx) {\n      document.querySelectorAll(\'.ms-video-tl-dot\').forEach(function (d, i) { d.classList.toggle(\'active\', i === activeIdx); });\n    }\n\n    function loadSegment(idx) {\n      modal._currentIdx = idx;\n      videoEl.pause(); videoEl.removeAttribute(\'src\'); videoEl.load();\n      videoEl.style.display = \'none\';\n      if (loadingEl) loadingEl.style.display = \'flex\';\n      var prevBtn = document.getElementById(\'msPplVideoPrev\');\n      var nextBtn = document.getElementById(\'msPplVideoNext\');\n      var url = \'/?ms_proxy=video&file_uuid=\' + fileUuid;\n	  if (segments && segments.length) {\n  	  var seg = segments[idx];\n 	  url += \'&start_time=\' + seg.start + \'&end_time=\' + seg.end;\n        if (segInfoEl) segInfoEl.textContent = \'片段 \' + (idx + 1) + \' / \' + segments.length + \'　\' + seg.label;\n      } else {\n        if (segInfoEl) segInfoEl.textContent = \'完整影片\';\n      }\n      if (prevBtn) prevBtn.disabled = (!segments || idx <= 0);\n      if (nextBtn) nextBtn.disabled = (!segments || idx >= segments.length - 1);\n      updateDots(idx);\n      fetch(url)\n        .then(function (r) { if (!r.ok) throw new Error(\'HTTP \' + r.status); return r.blob(); })\n        .then(function (blob) {\n          var blobUrl = URL.createObjectURL(blob);\n          if (modal._blobUrl) URL.revokeObjectURL(modal._blobUrl);\n          modal._blobUrl = blobUrl;\n          videoEl.src = blobUrl;\n          if (loadingEl) loadingEl.style.display = \'none\';\n          videoEl.style.display = \'\';\n          videoEl.play();\n        })\n        .catch(function (e) {\n          if (loadingEl) loadingEl.style.display = \'none\';\n          videoEl.style.display = \'\';\n          if (segInfoEl) segInfoEl.textContent = \'載入失敗：\' + e.message;\n        });\n    }\n\n    var tlWrap = document.getElementById(\'msPplVideoTimeline\');\n    var tlBar  = document.getElementById(\'msPplVideoTlBar\');\n    var tlEnd  = document.getElementById(\'msPplVideoTlEnd\');\n    if (tlBar) tlBar.innerHTML = \'\';\n    if (segments && segments.length && tlWrap && tlBar) {\n      tlWrap.style.display = \'\';\n      var totalDur = segments[segments.length - 1].end;\n      if (tlEnd) tlEnd.textContent = formatSecs(Math.round(totalDur));\n      segments.forEach(function (seg, idx) {\n        var dot = document.createElement(\'div\');\n        dot.className = \'ms-video-tl-dot\' + (idx === currentIdx ? \' active\' : \'\');\n        dot.style.left = (seg.start / totalDur * 100).toFixed(2) + \'%\';\n        var tip = document.createElement(\'div\'); tip.className = \'ms-video-tl-tip\'; tip.textContent = seg.label;\n        dot.appendChild(tip);\n        (function (i) { dot.addEventListener(\'click\', function (e) { e.stopPropagation(); loadSegment(i); }); })(idx);\n        tlBar.appendChild(dot);\n      });\n    } else if (tlWrap) { tlWrap.style.display = \'none\'; }\n\n    modal.classList.add(\'show\');\n    loadSegment(currentIdx);\n\n    var prevBtnEl = document.getElementById(\'msPplVideoPrev\');\n    var nextBtnEl = document.getElementById(\'msPplVideoNext\');\n    if (prevBtnEl) {\n      var newPrev = prevBtnEl.cloneNode(true); prevBtnEl.parentNode.replaceChild(newPrev, prevBtnEl);\n      newPrev.addEventListener(\'click\', function () { if (modal._currentIdx > 0) loadSegment(modal._currentIdx - 1); });\n    }\n    if (nextBtnEl) {\n      var newNext = nextBtnEl.cloneNode(true); nextBtnEl.parentNode.replaceChild(newNext, nextBtnEl);\n      newNext.addEventListener(\'click\', function () { if (modal._segments && modal._currentIdx < modal._segments.length - 1) loadSegment(modal._currentIdx + 1); });\n    }\n  }\n\n  function renderPagination(containerId, currentPage, totalItems, onPageChange) {\n    var container = document.getElementById(containerId); if (!container) return;\n    container.innerHTML = \'\';\n    var totalPages = Math.ceil(totalItems / PAGE_SIZE);\n    if (totalPages <= 1) return;\n    var wrap = document.createElement(\'div\');\n    wrap.style.cssText = \'display:flex;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap;\';\n\n    function makePageBtn(page) {\n      var btn = document.createElement(\'button\');\n      btn.textContent = page;\n      btn.style.cssText = \'min-width:32px;height:32px;border-radius:50%;border:1.5px solid \' + (page === currentPage ? \'#202124\' : \'#d1d5db\') + \';background:\' + (page === currentPage ? \'#202124\' : \'#fff\') + \';color:\' + (page === currentPage ? \'#fff\' : \'#202124\') + \';font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;\';\n      btn.addEventListener(\'click\', function () { onPageChange(page); });\n      return btn;\n    }\n\n    function makeDots() {\n      var outer = document.createElement(\'span\'); outer.style.cssText = \'position:relative;display:inline-flex;align-items:center;\';\n      var span = document.createElement(\'span\'); span.textContent = \'...\'; span.style.cssText = \'font-size:13px;color:#9aa0a6;padding:0 6px;cursor:pointer;border-radius:6px;transition:background .12s;\'; span.title = \'跳至頁面\';\n      var input = document.createElement(\'input\'); input.type = \'number\'; input.min = 1; input.max = totalPages; input.placeholder = \'頁\';\n      input.style.cssText = \'display:none;width:52px;height:32px;border:1.5px solid #1a56db;border-radius:8px;text-align:center;font-size:13px;font-family:inherit;outline:none;padding:0 4px;box-sizing:border-box;\';\n      span.addEventListener(\'mouseenter\', function () { span.style.background = \'#f3f4f6\'; });\n      span.addEventListener(\'mouseleave\', function () { span.style.background = \'\'; });\n      span.addEventListener(\'click\', function (e) { e.stopPropagation(); span.style.display = \'none\'; input.style.display = \'inline-block\'; input.value = \'\'; input.focus(); });\n      function commitJump() { var val = parseInt(input.value, 10); input.style.display = \'none\'; span.style.display = \'\'; if (val >= 1 && val <= totalPages) onPageChange(val); }\n      input.addEventListener(\'keydown\', function (e) { if (e.key === \'Enter\') commitJump(); if (e.key === \'Escape\') { input.style.display = \'none\'; span.style.display = \'\'; } });\n      input.addEventListener(\'blur\', function () { input.style.display = \'none\'; span.style.display = \'\'; });\n      outer.appendChild(span); outer.appendChild(input); return outer;\n    }\n\n    var prev = document.createElement(\'button\'); prev.className = \'ms-fm-icon-btn\'; prev.style.cssText = \'border-radius:50%;flex-shrink:0;\' + (currentPage === 1 ? \'opacity:0.35;\' : \'\');\n    prev.innerHTML = \'<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 18l-6-6 6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n    prev.disabled = currentPage === 1;\n    prev.addEventListener(\'click\', function () { if (currentPage > 1) onPageChange(currentPage - 1); });\n    wrap.appendChild(prev);\n\n    var delta = 2, pages = [], left = currentPage - delta, right = currentPage + delta;\n    for (var p = 1; p <= totalPages; p++) { if (p === 1 || p === totalPages || (p >= left && p <= right)) pages.push(p); }\n    var prev_page = null;\n    pages.forEach(function (page) { if (prev_page !== null && page - prev_page > 1) wrap.appendChild(makeDots()); wrap.appendChild(makePageBtn(page)); prev_page = page; });\n\n    var next = document.createElement(\'button\'); next.className = \'ms-fm-icon-btn\'; next.style.cssText = \'border-radius:50%;flex-shrink:0;\' + (currentPage === totalPages ? \'opacity:0.35;\' : \'\');\n    next.innerHTML = \'<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\';\n    next.disabled = currentPage === totalPages;\n    next.addEventListener(\'click\', function () { if (currentPage < totalPages) onPageChange(currentPage + 1); });\n    wrap.appendChild(next);\n\n    var info = document.createElement(\'span\'); info.style.cssText = \'font-size:12px;color:#9aa0a6;margin-left:4px;flex-shrink:0;\'; info.textContent = \'共 \' + totalItems + \' 筆\';\n    wrap.appendChild(info);\n    container.appendChild(wrap);\n  }\n\n  function makePersonCard(person, cardType) {\n    var card = document.createElement(\'div\');\n    card.className = \'ms-ppl-face-card\' + (person.isStarred ? \' starred\' : \'\') + (cardType === \'skipped\' ? \' ms-ppl-card-skipped\' : \'\');\n    card.dataset.personId = person.id;\n    var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-ppl-face-img-wrap\';\n    if (person.thumb) { imgWrap.appendChild(makeImg(person.thumb)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n    if (cardType === \'known\' && person.isNew) { var newBadge = document.createElement(\'div\'); newBadge.className = \'ms-ppl-face-new\'; newBadge.textContent = \'New\'; imgWrap.appendChild(newBadge); }\n    var starBadge = document.createElement(\'div\'); starBadge.className = \'ms-ppl-card-star\'; starBadge.textContent = \'★\'; imgWrap.appendChild(starBadge);\n    card.appendChild(imgWrap);\n    var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-ppl-face-name\' + ((!person.name || cardType === \'skipped\') ? \' pending-name\' : \'\'); nameEl.textContent = person.name || person._pendingLabel || \'（未命名）\'; card.appendChild(nameEl);\n    card.addEventListener(\'click\', function () { openDetail(person); });\n\n    if (cardType === \'skipped\') {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplSkippedCtxMenu\'); if (!menu) return;\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n    } else if (cardType === \'pending\') {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplPendingCtxMenu\'); if (!menu) return;\n        var pendingStarItem = document.getElementById(\'msPplPendingCtxStar\');\n        if (pendingStarItem) pendingStarItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 140 > window.innerWidth) ? e.clientX - 140 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 50  > window.innerHeight) ? e.clientY - 50  : e.clientY) + \'px\';\n      });\n    } else {\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); state.ctxCardPerson = person;\n        var menu = document.getElementById(\'msPplCardCtxMenu\'); if (!menu) return;\n        var starItem = document.getElementById(\'msPplCardCtxStar\'); if (starItem) starItem.textContent = person.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n    }\n    return card;\n  }\n\n  function renderGrid() { renderKnownGrid(); renderPendingGrid(); renderSkippedGrid(); }\n\n  function getFilteredPeople() {\n    var list = knownPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    if (state.searchQuery) { var q = state.searchQuery.toLowerCase(); list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); }); }\n    var sortEl = document.querySelector(\'input[name=\"ms-ppl-sort\"]:checked\');\n    var sort = sortEl ? sortEl.value : \'recent\';\n    if (sort === \'recent\') { list.sort(function (a, b) { if (!a.lastViewed && !b.lastViewed) return 0; if (!a.lastViewed) return 1; if (!b.lastViewed) return -1; return b.lastViewed - a.lastViewed; }); }\n    else if (sort === \'name_az\') { list.sort(function (a, b) { return (a.name || \'\').localeCompare(b.name || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.name || \'\').localeCompare(a.name || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'time_desc\') { list.sort(function (a, b) { return b.addedAt - a.addedAt; }); }\n    else if (sort === \'time_asc\') { list.sort(function (a, b) { return a.addedAt - b.addedAt; }); }\n    return list;\n  }\n\n  function renderKnownGrid() {\n    var grid = document.getElementById(\'msPplUnassignedGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = getFilteredPeople();\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; var pg = document.getElementById(\'msPplKnownPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (knownPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'known\')); });\n    renderPagination(\'msPplKnownPagination\', knownPage, list.length, function (p) { knownPage = p; renderKnownGrid(); document.getElementById(\'msPplUnassignedGrid\').scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n    loadGridThumbnails(pageList);\n  }\n\n  function renderPendingGrid() {\n    var grid = document.getElementById(\'msPplPendingGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = pendingPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    var q = ((document.getElementById(\'msPplPendingSearchInput\') || {}).value || \'\').trim().toLowerCase();\n    if (q) { list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p._pendingLabel || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); }); }\n    var sortEl = document.querySelector(\'input[name=\"ms-pending-sort\"]:checked\');\n    var sort = sortEl ? sortEl.value : \'name_az\';\n    if (sort === \'recent\') { list.sort(function (a, b) { if (!a.lastViewed && !b.lastViewed) return 0; if (!a.lastViewed) return 1; if (!b.lastViewed) return -1; return b.lastViewed - a.lastViewed; }); }\n    else if (sort === \'name_az\') { list.sort(function (a, b) { return (a.name || a._pendingLabel || \'\').localeCompare(b.name || b._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.name || b._pendingLabel || \'\').localeCompare(a.name || a._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); }); }\n    else if (sort === \'time_desc\') { list.sort(function (a, b) { return b.addedAt - a.addedAt; }); }\n    else if (sort === \'time_asc\') { list.sort(function (a, b) { return a.addedAt - b.addedAt; }); }\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (q ? \'沒有符合的待定人物\' : \'目前沒有待定人物\') + \'</div>\'; var pg = document.getElementById(\'msPplPendingPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (pendingPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'pending\')); });\n    renderPagination(\'msPplPendingPagination\', pendingPage, list.length, function (p) { pendingPage = p; renderPendingGrid(); document.getElementById(\'msPplPendingGrid\').scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n    loadGridThumbnails(pageList);\n  }\n\n  var skippedPage = 1;\n\n  function renderSkippedGrid() {\n    var grid = document.getElementById(\'msPplSkippedGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    var list = skippedPeople.slice();\n    if (state.showStarred) { list = list.filter(function (p) { return p.isStarred; }); }\n    if (state.searchQuery) {\n      var q = state.searchQuery.toLowerCase();\n      list = list.filter(function (p) { return (p.name || \'\').toLowerCase().indexOf(q) !== -1 || (p._pendingLabel || \'\').toLowerCase().indexOf(q) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(q) !== -1; }); });\n    }\n    if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (state.searchQuery ? \'沒有符合的已略過人物\' : \'目前沒有已略過人物\') + \'</div>\'; var pg = document.getElementById(\'msPplSkippedPagination\'); if (pg) pg.innerHTML = \'\'; return; }\n    var start = (skippedPage - 1) * PAGE_SIZE, pageList = list.slice(start, start + PAGE_SIZE);\n    pageList.forEach(function (p) { grid.appendChild(makePersonCard(p, \'skipped\')); });\n    renderPagination(\'msPplSkippedPagination\', skippedPage, list.length, function (p) { skippedPage = p; renderSkippedGrid(); });\n    loadGridThumbnails(pageList);\n  }\n\n  function changePersonStatus(person, newStatus) {\n    if (!person) return;\n    var oldStatus = person.status || \'pending\';\n    if (oldStatus === newStatus) return;\n    var removeFrom = oldStatus === \'confirmed\' ? knownPeople : oldStatus === \'skipped\' ? skippedPeople : pendingPeople;\n    var idx = removeFrom.findIndex(function (p) { return p.id === person.id; });\n    if (idx !== -1) removeFrom.splice(idx, 1);\n    person.status = newStatus;\n    if (newStatus === \'confirmed\') { knownPeople.push(person); }\n    else if (newStatus === \'skipped\') { skippedPeople.push(person); }\n    else { if (!person._pendingLabel) person._pendingLabel = \'未命名 #\' + String(++_unnamedCount).padStart(2, \'0\'); pendingPeople.push(person); }\n    person.userConfirmed = (newStatus === \'confirmed\');\n    person.userSkipped   = (newStatus === \'skipped\');\n    apiPatch(\'/identity/\' + person.id, { metadata: buildMetadataPatch(person) })\n      .then(function () { showToast(\'已更新狀態\'); })\n      .catch(function (e) { console.warn(\'ms-people: PATCH status 失敗\', e); showToast(\'更新失敗，請稍後再試\'); changePersonStatus(person, oldStatus); });\n    renderGrid();\n  }\n\n  function toggleStar(person) { toggleStarAndSave(person); }\n\n  function syncDetailStarBtns(person) {\n    [\'msPplStarBtn\', \'msPplStarBtnEdit\'].forEach(function (id) {\n      var btn = document.getElementById(id); if (!btn) return;\n      btn.textContent = person.isStarred ? \'★\' : \'☆\';\n      btn.classList.toggle(\'starred\', person.isStarred);\n    });\n  }\n\n  function openDetail(person) {\n    state.currentPerson = person; state.editMode = false; state.isDirty = false; state.promoteMode = false;\n    person.lastViewed = new Date();\n    applyDraftIfMatch(person); clearDraft();\n    renderDetailView(person); showView(\'msPplViewDetail\'); loadPersonDetail(person);\n  }\n\n  function renderDetailView(person) {\n    var nameEl = document.getElementById(\'msPplDetailName\');\n    if (nameEl) { if (person.name) { nameEl.textContent = person.name; nameEl.classList.remove(\'placeholder\'); } else { nameEl.textContent = \'加入人名\'; nameEl.classList.add(\'placeholder\'); } }\n    syncDetailStarBtns(person);\n    var aliasesEl = document.getElementById(\'msPplDetailAliases\');\n    if (aliasesEl) { aliasesEl.innerHTML = \'\'; (person.aliases || []).forEach(function (a) { var chip = document.createElement(\'span\'); chip.className = \'ms-ppl-alias-chip\'; var localeSpan = a.locale ? \'<span style=\"font-size:10px;color:#9aa0a6;margin-right:4px;\">\' + a.locale + \'</span>\' : \'\'; chip.innerHTML = localeSpan + (a.name || a); aliasesEl.appendChild(chip); }); }\n    setText(\'msPplDetailRole\', person.role); setText(\'msPplDetailNotes\', person.notes);\n    var avatar = document.getElementById(\'msPplAvatar\');\n    if (avatar) {\n      avatar.innerHTML = \'\';\n      if (person.thumb) { avatar.appendChild(makeImg(person.thumb)); } else { avatar.innerHTML = SILHOUETTE_SVG; }\n      var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n      hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n      avatar.appendChild(hint);\n    }\n    renderFaceStrip(person); renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\');\n    if (label) { label.textContent = person.media.length ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片，共 \' + person.media.length + \' 個檔案\' : \'載入中…\'; }\n    setEditMode(false); state.isDirty = false;\n  }\n\n  function setEditMode(on) {\n    state.editMode = on;\n    var viewEl = document.getElementById(\'msPplInfoView\'), editEl = document.getElementById(\'msPplInfoEdit\');\n    if (viewEl) viewEl.style.display = on ? \'none\' : \'\'; if (editEl) editEl.style.display = on ? \'\' : \'none\';\n    var detail = document.getElementById(\'msPplViewDetail\'); if (detail) detail.classList.toggle(\'ms-ppl-edit-mode\', on);\n    var toggle = document.getElementById(\'msPplEditToggle\');\n    if (toggle) {\n      if (on) { toggle.innerHTML = \'編輯中 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>\'; toggle.style.color = \'#1a56db\'; }\n      else { toggle.innerHTML = \'編輯 <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"margin-left:4px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\'; toggle.style.color = \'\'; }\n    }\n    if (!on) state.isDirty = false;\n  }\n\n  function renderFaceStrip(person) {\n    var strip = document.getElementById(\'msPplFaceStrip\'); if (!strip) return;\n    strip.innerHTML = \'\';\n    (person.face_members || []).slice().sort(function (a, b) { return (b.confidence || 0) - (a.confidence || 0); }).slice(0, 20).forEach(function (fm) {\n      var el = document.createElement(\'div\'); el.className = \'ms-ppl-strip-face\'; el.dataset.fmId = fm.id;\n      var imgBox = document.createElement(\'div\'); imgBox.className = \'ms-ppl-strip-face-img\'; imgBox.style.position = \'relative\';\n      if (fm.thumb) { imgBox.appendChild(makeImg(fm.thumb)); } else { imgBox.innerHTML = SILHOUETTE_SVG; }\n      if (fm.confidence) { var pct = document.createElement(\'div\'); pct.style.cssText = \'position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:9px;color:#fff;background:rgba(0,0,0,.45);border-radius:0 0 10px 10px;padding:1px 0;\'; pct.textContent = Math.round(fm.confidence * 100) + \'%\'; imgBox.appendChild(pct); }\n      el.appendChild(imgBox);\n      var removeBtn = document.createElement(\'button\'); removeBtn.className = \'ms-ppl-strip-remove-btn\'; removeBtn.textContent = \'×\'; removeBtn.title = \'移除\';\n      removeBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); state.ctxFmId = fm.id; showModal(\'msPplRemoveModal\'); });\n      el.appendChild(removeBtn);\n      el.addEventListener(\'contextmenu\', function (e) { e.preventDefault(); state.ctxFmId = fm.id; showCtxMenu(e.clientX, e.clientY); });\n      strip.appendChild(el);\n    });\n    var wrap = document.getElementById(\'msPplViewDetail\'); if (wrap) wrap.classList.toggle(\'ms-ppl-edit-mode\', state.editMode);\n  }\n\n  function renderMediaGrid(media) {\n    var grid = document.getElementById(\'msPplMediaGrid\'); if (!grid) return;\n    grid.innerHTML = \'\';\n    if (!media.length) return;\n    media.forEach(function (item) {\n      var el = document.createElement(\'div\'); el.className = \'ms-ppl-media-item\';\n      if (item.file_uuid) el.dataset.fileUuid = item.file_uuid;\n      var dur = item.duration ? formatSecs(item.duration) : \'\';\n      var durHtml = dur ? \'<span class=\"ms-ppl-media-dur\">\' + dur + \'</span>\' : \'\';\n      el.innerHTML =\n        \'<div class=\"ms-ppl-media-thumb\" title=\"點擊播放\">\' +\n          \'<div class=\"ms-thumb-bg\" \' + (item.thumb ? \'style=\"background-image:url(\' + item.thumb + \');background-size:cover;background-position:center;\"\' : \'\') + \'></div>\' +\n          \'<div class=\"ms-thumb-play-circle\"><svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><polygon points=\"6,3 20,12 6,21\" fill=\"rgba(255,255,255,0.75)\"/></svg></div>\' +\n          durHtml + (item.confidence != null ? \'<span class=\"ms-ppl-media-badge-conf\">\' + item.confidence + \'%</span>\' : \'\') +\n        \'</div>\' +\n        \'<div class=\"ms-ppl-media-info\"><div class=\"ms-ppl-media-title\">\' + (item.title || \'—\') + \'</div><div class=\"ms-ppl-media-sub\">\' + (item.subtitle || \'\') + \'</div></div>\';\n      var thumbEl = el.querySelector(\'.ms-ppl-media-thumb\');\n      (function (fUuid, mediaItem) {\n        thumbEl.addEventListener(\'click\', function (e) {\n          e.stopPropagation();\n          if (mediaItem._segments && mediaItem._segments.length) { openVideoPlayer(fUuid, mediaItem._segments, 0); }\n          else if (!mediaItem._segmentsLoaded) {\n            if (!el.dataset.tlLoaded) { el.dataset.tlLoaded = \'1\'; loadFaceTimeline(mediaItem, el, function () { openVideoPlayer(fUuid, mediaItem._segments && mediaItem._segments.length ? mediaItem._segments : null, 0); }); }\n            else { openVideoPlayer(fUuid, null, 0); }\n          } else { openVideoPlayer(fUuid, mediaItem._segments && mediaItem._segments.length ? mediaItem._segments : null, 0); }\n        });\n      })(item.file_uuid, item);\n      grid.appendChild(el);\n    });\n  }\n\n  function loadFaceTimeline(item, cardEl, onDone) {\n    var fileUuid = item.file_uuid; if (!fileUuid) { if (onDone) onDone(); return; }\n    var person = state.currentPerson; if (!person) { if (onDone) onDone(); return; }\n    var traceIds = (person.face_members || []).map(function (fm) { return fm.trace_id; }).filter(Boolean);\n    var allFaces = [], PAGE = 500;\n    function fetchPage(page) { return apiFetch(\'/file/\' + fileUuid + \'/faces?binding=identity&page=\' + page + \'&page_size=\' + PAGE); }\n    fetchPage(1).then(function (body) {\n      if (!body || !Array.isArray(body.data)) throw new Error(\'no data\');\n      allFaces = allFaces.concat(body.data);\n      var total = body.total || 0, totalPages = Math.ceil(total / PAGE), remaining = [];\n      for (var p = 2; p <= Math.min(totalPages, 10); p++) { remaining.push(fetchPage(p)); }\n      return Promise.all(remaining);\n    }).then(function (pages) {\n      (pages || []).forEach(function (body) { if (body && Array.isArray(body.data)) allFaces = allFaces.concat(body.data); });\n      var traceSet = {}; traceIds.forEach(function (id) { traceSet[id] = true; });\n      var myFaces = allFaces.filter(function (f) { return traceSet[f.trace_id]; });\n      if (!myFaces.length) { item._segments = []; item._segmentsLoaded = true; if (onDone) onDone(); return; }\n      myFaces.sort(function (a, b) { return a.timestamp_secs - b.timestamp_secs; });\n      var segments = [], cur = null;\n      myFaces.forEach(function (f) {\n        if (!cur || f.timestamp_secs - cur.end > 2) { cur = { start: f.timestamp_secs, end: f.timestamp_secs, count: 1 }; segments.push(cur); }\n        else { cur.end = f.timestamp_secs; cur.count++; }\n      });\n      item._segments = segments.map(function (seg) { return { start: Math.max(0, Math.round(seg.start) - 1), end: Math.round(seg.end) + 1, label: formatSecs(Math.round(seg.start)) + \' – \' + formatSecs(Math.round(seg.end)) }; });\n      item._segmentsLoaded = true;\n      if (onDone) onDone();\n    }).catch(function (e) { console.warn(\'ms-people: loadFaceTimeline 失敗\', fileUuid, e); item._segments = []; item._segmentsLoaded = true; if (onDone) onDone(); });\n  }\n\n  function renderAliases() {\n    var wrap = document.getElementById(\'msPplAliasWrap\'); if (!wrap) return; wrap.innerHTML = \'\';\n    state.currentAliases.forEach(function (alias, idx) {\n      var tag = document.createElement(\'span\'); tag.className = \'ms-ppl-alias-tag\';\n      var localeLabel = alias.locale ? \'<span style=\"font-size:10px;color:#9aa0a6;margin-right:3px;\">\' + alias.locale + \'</span>\' : \'\';\n      tag.innerHTML = localeLabel + (alias.name || \'\') + \' <button type=\"button\" data-idx=\"\' + idx + \'\">×</button>\';\n      tag.querySelector(\'button\').addEventListener(\'click\', function () { state.currentAliases.splice(Number(this.dataset.idx), 1); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); });\n      wrap.appendChild(tag);\n    });\n  }\n\n  function openMergeModal(sourcePerson, fromDetail) {\n    state.mergeSource = sourcePerson; state.mergeTarget = null; state.mergeFromDetail = fromDetail;\n    var triggerFaceEl = document.getElementById(\'msMergeTriggerFace\');\n    if (triggerFaceEl) { if (sourcePerson.thumb) { triggerFaceEl.innerHTML = \'\'; triggerFaceEl.appendChild(makeImg(sourcePerson.thumb)); } else { triggerFaceEl.innerHTML = SILHOUETTE_SVG; } }\n    var searchEl = document.getElementById(\'msMergeSearchInput\'); if (searchEl) searchEl.value = \'\';\n    renderMergeGrid(\'\'); showModal(\'msPplMergeModal\');\n  }\n\n  function renderMergeGrid(query) {\n    var grid = document.getElementById(\'msMergeGrid\'); if (!grid) return; grid.innerHTML = \'\';\n    function filterAndSort(source) {\n      return source.filter(function (p) { if (state.mergeSource && p.id === state.mergeSource.id) return false; if (!query) return true; return (p.name || p._pendingLabel || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1; })\n        .sort(function (a, b) { return (a.name || a._pendingLabel || \'\').localeCompare(b.name || b._pendingLabel || \'\', undefined, { sensitivity: \'base\' }); });\n    }\n    function makeCard(person) {\n      var card = document.createElement(\'div\'); card.className = \'ms-merge-face-card\' + (state.mergeTarget === person.id ? \' selected\' : \'\'); card.dataset.personId = person.id;\n      var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-merge-face-img\';\n      if (person.thumb) { imgWrap.appendChild(makeImg(person.thumb)); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n      var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-merge-face-name\'; nameEl.textContent = person.name || person._pendingLabel || \'（未命名）\';\n      card.appendChild(imgWrap); card.appendChild(nameEl);\n      card.addEventListener(\'click\', function () { state.mergeTarget = person.id; var g = document.getElementById(\'msMergeGrid\'); if (g) g.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) { c.classList.toggle(\'selected\', c.dataset.personId === person.id); }); });\n      return card;\n    }\n    function makeSectionTitle(text) { var el = document.createElement(\'div\'); el.style.cssText = \'width:100%;font-size:11px;font-weight:700;color:#9aa0a6;letter-spacing:.06em;text-transform:uppercase;padding:4px 0 10px;margin-top:4px;\'; el.textContent = text; return el; }\n    function makeSection(people, title) { if (!people.length) return; grid.appendChild(makeSectionTitle(title)); var row = document.createElement(\'div\'); row.style.cssText = \'display:flex;flex-wrap:wrap;gap:16px;width:100%;margin-bottom:20px;\'; people.forEach(function (p) { row.appendChild(makeCard(p)); }); grid.appendChild(row); }\n    var knownList = filterAndSort(knownPeople), pendingList = filterAndSort(pendingPeople);\n    if (!knownList.length && !pendingList.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; return; }\n    makeSection(knownList, \'已知人物\'); makeSection(pendingList, \'待定人物\');\n  }\n\n  function loadPersonDetail(person) {\n    if (_detailCache[person.id]) { applyDetailCache(person); return Promise.resolve(); }\n    return Promise.all([\n      apiFetch(\'/identity/\' + person.id + \'/traces\'),\n      apiFetch(\'/identity/\' + person.id + \'/files\'),\n    ]).then(function (results) {\n      var tracesBody = results[0], filesBody = results[1];\n      var traces = (tracesBody && Array.isArray(tracesBody.traces)) ? tracesBody.traces : (tracesBody && Array.isArray(tracesBody.data)) ? tracesBody.data : [];\n      person.face_members = traces.map(function (t) { return { id: t.trace_id, numeric_id: t.trace_id, thumb: null, file_uuid: t.file_uuid, trace_id: t.trace_id, frame: t.first_frame, timestamp: t.first_sec, confidence: t.avg_confidence }; });\n      person.thumb = null;\n      fetch(\'/?ms_proxy=profile_image&id=\' + person.id)\n        .then(function (r) {\n          if (!r.ok) return;\n          return r.blob().then(function (blob) {\n            var blobUrl = URL.createObjectURL(blob); person.thumb = blobUrl; person._hasProfileImage = true;\n            var avatar = document.getElementById(\'msPplAvatar\');\n            if (avatar && state.currentPerson && state.currentPerson.id === person.id) {\n              avatar.innerHTML = \'\'; avatar.appendChild(makeImg(blobUrl));\n              var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n              hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n              avatar.appendChild(hint);\n            }\n            var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n            if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) existing.replaceWith(makeImg(blobUrl)); } }\n          });\n        }).catch(function () {});\n      var files = (filesBody && Array.isArray(filesBody.data)) ? filesBody.data : (filesBody && Array.isArray(filesBody.files)) ? filesBody.files : (filesBody && Array.isArray(filesBody)) ? filesBody : [];\n      person.media = files.map(function (f) {\n        var dur = f.metadata && f.metadata.duration ? parseFloat(f.metadata.duration) : 0;\n        return { title: cleanFileName(f.file_name), subtitle: (f.first_appearance != null ? \'首次出現 \' + formatSecs(f.first_appearance) : \'\') + (f.last_appearance != null ? \'　最後 \' + formatSecs(f.last_appearance) : \'\'), thumb: null, type: \'video\', duration: Math.round(dur), confidence: f.confidence ? Math.round(f.confidence * 100) : null, face_count: f.face_count || 0, file_uuid: f.file_uuid };\n      });\n      person.media.forEach(function (mediaItem) {\n        if (!mediaItem.file_uuid) return;\n        var fm = (person.face_members || []).find(function (f) { return f.file_uuid === mediaItem.file_uuid; });\n        var thumbUrl = fm\n  ? \'/?ms_proxy=thumbnail&file_uuid=\' + fm.file_uuid + \'&trace_id=\' + fm.trace_id\n  : \'/?ms_proxy=file_thumbnail&file_uuid=\' + mediaItem.file_uuid;\n	fetch(thumbUrl)\n 	 .then(function (r) {\n 	   if (!r.ok) return;\n 	   return r;\n 	 })\n          .then(function (r) {\n            if (!r || !r.ok) return;\n            return r.blob().then(function (blob) {\n              mediaItem.thumb = URL.createObjectURL(blob);\n              var bg = document.querySelector(\'.ms-ppl-media-item[data-file-uuid=\"\' + mediaItem.file_uuid + \'\"] .ms-thumb-bg\');\n              if (bg) { bg.style.backgroundImage = \'url(\' + mediaItem.thumb + \')\'; bg.style.backgroundSize = \'cover\'; bg.style.backgroundPosition = \'center\'; }\n            });\n          }).catch(function () {});\n      });\n      var thumbFactories = person.face_members.filter(function (fm) { return fm.file_uuid && fm.trace_id; }).slice(0, 20).map(function (fm) {\n        return function () {\n          return fetch(\'/?ms_proxy=thumbnail&file_uuid=\' + fm.file_uuid + \'&trace_id=\' + fm.trace_id)\n            .then(function (r) { if (!r.ok) return; return r.blob().then(function (blob) { fm.thumb = URL.createObjectURL(blob); if (!person.thumb) person.thumb = fm.thumb; }); })\n            .catch(function () {});\n        };\n      });\n      return throttledPool(thumbFactories, 5).then(function () {\n        var avatar = document.getElementById(\'msPplAvatar\'); if (avatar && person.thumb) { avatar.innerHTML = \'\'; avatar.appendChild(makeImg(person.thumb)); }\n        var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n        if (card && person.thumb) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) { existing.replaceWith(makeImg(person.thumb)); } else { imgWrap.insertBefore(makeImg(person.thumb), imgWrap.firstChild); } } }\n        person._metaLoaded = true; _detailCache[person.id] = true; applyDetailCache(person);\n      });\n    }).catch(function (e) { console.warn(\'ms-people: 載入人物詳情失敗\', person.id, e); _detailCache[person.id] = true; applyDetailCache(person); });\n  }\n\n  function applyDetailCache(person) {\n    if (!state.currentPerson || state.currentPerson.id !== person.id) return;\n    renderFaceStrip(person); renderMediaGrid(person.media || []);\n    var label = document.getElementById(\'msPplMediaLabel\'); if (label) { label.textContent = person.media.length ? \'有出現 \' + (person.name || \'此人物\') + \' 的影片，共 \' + person.media.length + \' 個檔案\' : \'尚未找到相關影片\'; }\n  }\n\n  function loadGridThumbnails(people) {\n    var factories = people.filter(function (person) { return !person.thumb && !person._thumbLoading; }).map(function (person) {\n      person._thumbLoading = true;\n      return function () {\n        return apiFetch(\'/identity/\' + person.id + \'/traces\').then(function (body) {\n          var traces = (body && Array.isArray(body.traces)) ? body.traces : (body && Array.isArray(body.data)) ? body.data : [];\n          if (!traces.length) return; var t = traces[0]; if (!t.file_uuid || !t.trace_id) return;\n          return fetch(\'/?ms_proxy=thumbnail&file_uuid=\' + t.file_uuid + \'&trace_id=\' + t.trace_id).then(function (r) {\n            if (!r.ok) return;\n            return r.blob().then(function (blob) {\n              person.thumb = URL.createObjectURL(blob);\n              var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n              if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) { existing.replaceWith(makeImg(person.thumb)); } else { imgWrap.insertBefore(makeImg(person.thumb), imgWrap.firstChild); } } }\n            });\n          });\n        }).catch(function () { person._thumbLoading = false; });\n      };\n    });\n    throttledPool(factories, 5);\n  }\n\n  function showToast(msg) {\n    var existing = document.getElementById(\'msPplToast\'); if (existing) existing.remove();\n    var toast = document.createElement(\'div\'); toast.id = \'msPplToast\'; toast.textContent = msg;\n    toast.style.cssText = \'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#202124;color:#fff;font-family:\"DM Sans\",\"Noto Sans TC\",sans-serif;font-size:13px;padding:10px 20px;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:99999;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap;\';\n    document.body.appendChild(toast);\n    requestAnimationFrame(function () { toast.style.opacity = \'1\'; });\n    setTimeout(function () { toast.style.opacity = \'0\'; setTimeout(function () { if (toast.parentNode) toast.remove(); }, 300); }, 3000);\n  }\n\n  function showMergeUndoToast(transferred, mergeId, sourcePerson, targetPerson, sourceStatus) {\n    var existing = document.getElementById(\'msPplToast\');\n    if (existing) existing.remove();\n\n    var toast = document.createElement(\'div\');\n    toast.id = \'msPplToast\';\n    toast.style.cssText = [\n      \'position:fixed\', \'bottom:28px\', \'left:50%\', \'transform:translateX(-50%)\',\n      \'background:#202124\', \'color:#fff\',\n      \'font-family:\"DM Sans\",\"Noto Sans TC\",sans-serif\', \'font-size:13px\',\n      \'padding:10px 16px 10px 20px\', \'border-radius:12px\',\n      \'box-shadow:0 4px 16px rgba(0,0,0,.25)\', \'z-index:99999\',\n      \'display:flex\', \'align-items:center\', \'gap:12px\',\n      \'opacity:0\', \'transition:opacity .2s\', \'white-space:nowrap\',\n    ].join(\';\');\n\n    var msg = document.createElement(\'span\');\n    msg.textContent = transferred !== null\n      ? \'合併完成，已轉移 \' + transferred + \' 個識別記錄\'\n      : \'合併完成\';\n    toast.appendChild(msg);\n\n    var timer = null;\n\n    if (mergeId) {\n      var undoBtn = document.createElement(\'button\');\n      undoBtn.textContent = \'復原\';\n      undoBtn.style.cssText = [\n        \'border:1.5px solid rgba(255,255,255,0.35)\', \'background:transparent\',\n        \'color:#fff\', \'border-radius:6px\', \'padding:3px 10px\',\n        \'font-family:\"DM Sans\",\"Noto Sans TC\",sans-serif\', \'font-size:12px\',\n        \'cursor:pointer\', \'flex-shrink:0\',\n      ].join(\';\');\n\n      undoBtn.addEventListener(\'click\', function () {\n        if (timer) clearTimeout(timer);\n        toast.remove();\n        doMergeUndo(mergeId, sourcePerson, targetPerson, sourceStatus);\n      });\n\n      toast.appendChild(undoBtn);\n    }\n\n    document.body.appendChild(toast);\n    requestAnimationFrame(function () { toast.style.opacity = \'1\'; });\n\n    timer = setTimeout(function () {\n      toast.style.opacity = \'0\';\n      setTimeout(function () { if (toast.parentNode) toast.remove(); }, 300);\n    }, 8000);\n  }\n\n  function doMergeUndo(mergeId, sourcePerson, targetPerson, sourceStatus) {\n    showToast(\'復原中…\');\n\n    apiPost(\'/identity/merge/\' + mergeId + \'/undo\', {})\n      .then(function (res) {\n        var facesReverted = (res && res.data && res.data.faces_reverted != null)\n          ? res.data.faces_reverted : null;\n\n        if (targetPerson && sourcePerson.face_members && sourcePerson.face_members.length) {\n          targetPerson.face_members = (targetPerson.face_members || []).filter(function (fm) {\n            return !sourcePerson.face_members.some(function (sfm) { return sfm.id === fm.id; });\n          });\n          _detailCache[targetPerson.id] = false;\n        }\n\n        // 先從兩個 list 都清掉，避免重複\n        var ikSource = knownPeople.findIndex(function (p) { return p.id === sourcePerson.id; });\n        if (ikSource !== -1) knownPeople.splice(ikSource, 1);\n        var ipSource = pendingPeople.findIndex(function (p) { return p.id === sourcePerson.id; });\n        if (ipSource !== -1) pendingPeople.splice(ipSource, 1);\n\n        if (sourceStatus === \'confirmed\') {\n          sourcePerson.status        = \'confirmed\';\n          sourcePerson.userConfirmed = true;\n          sourcePerson.userSkipped   = false;\n          knownPeople.unshift(sourcePerson);\n        } else {\n          sourcePerson.status        = \'pending\';\n          sourcePerson.userConfirmed = false;\n          sourcePerson.userSkipped   = false;\n          if (!sourcePerson._pendingLabel) {\n            sourcePerson._pendingLabel = \'未命名 #\' + String(++_unnamedCount).padStart(2, \'0\');\n          }\n          pendingPeople.unshift(sourcePerson);\n        }\n\n        knownPage = 1; pendingPage = 1;\n        renderGrid();\n\n        showToast(facesReverted !== null\n          ? \'已復原合併，\' + facesReverted + \' 個識別記錄已還原\'\n          : \'已復原合併\');\n      })\n      .catch(function (e) {\n        console.warn(\'ms-people: merge undo 失敗\', e);\n        showToast(e === 400\n          ? \'復原失敗：已超過 24 小時期限或已復原過\'\n          : \'復原失敗，請稍後再試\');\n      });\n  }\n\n  function bindEvents() {\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplCtxMenu\')) hideCtxMenu(); });\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplPendingCtxMenu\')) hidePendingCtxMenu(); });\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplCardCtxMenu\')) hideCardCtxMenu(); });\n    document.querySelectorAll(\'.ms-modal-overlay\').forEach(function (o) { o.addEventListener(\'click\', function (e) { if (e.target === o) o.classList.remove(\'show\'); }); });\n\n    var pendingSearchInput = document.getElementById(\'msPplPendingSearchInput\');\n    if (pendingSearchInput) { pendingSearchInput.addEventListener(\'input\', function () { pendingPage = 1; renderPendingGrid(); }); }\n\n    var pendingSortBtn = document.getElementById(\'msPplPendingSortBtn\'), pendingSortPanel = document.getElementById(\'msPplPendingSortPanel\');\n    if (pendingSortBtn && pendingSortPanel) {\n      pendingSortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); pendingSortPanel.classList.toggle(\'show\'); });\n      document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplPendingSortPanel\') && !e.target.closest(\'#msPplPendingSortBtn\')) pendingSortPanel.classList.remove(\'show\'); });\n    }\n    document.querySelectorAll(\'input[name=\"ms-pending-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { pendingPage = 1; if (pendingSortPanel) pendingSortPanel.classList.remove(\'show\'); renderPendingGrid(); }); });\n\n    var starToggleBtn = document.getElementById(\'msPplStarToggleBtn\'), starToggleLabel = document.getElementById(\'msPplStarToggleLabel\'), sectionTitle = document.getElementById(\'msPplSectionTitle\');\n    if (starToggleBtn) {\n      starToggleBtn.addEventListener(\'click\', function () {\n        state.showStarred = !state.showStarred; knownPage = 1;\n        starToggleBtn.classList.toggle(\'active\', state.showStarred);\n        var starIcon = starToggleBtn.querySelector(\'.ms-ppl-star-icon\');\n        var starredPending = pendingPeople.some(function (p) { return p.isStarred; });\n        var starredSkipped = skippedPeople.some(function (p) { return p.isStarred; });\n        if (state.showStarred) {\n          var tp0 = document.getElementById(\'msPplTogglePending\'), tu0 = document.getElementById(\'msPplToggleUface\'), ts0 = document.getElementById(\'msPplToggleSkipped\');\n          state._savedPendingActive = tp0 ? tp0.getAttribute(\'data-active\') : \'true\';\n          state._savedUfaceActive   = tu0 ? tu0.getAttribute(\'data-active\') : \'true\';\n          state._savedSkippedActive = ts0 ? ts0.getAttribute(\'data-active\') : \'false\';\n          starToggleLabel.textContent = \'查看所有人物\';\n          if (starIcon) starIcon.style.display = \'none\';\n          sectionTitle.innerHTML = \'<span style=\"color:#f59e0b;\">★</span> 已加星號之重要人物：\';\n          var tpBtn = document.getElementById(\'msPplTogglePending\'); if (tpBtn) tpBtn.style.display = \'\';\n          var ufaceBtn = document.getElementById(\'msPplToggleUface\'); if (ufaceBtn) ufaceBtn.style.display = \'none\';\n          var skippedBtn = document.getElementById(\'msPplToggleSkipped\'); if (skippedBtn) skippedBtn.style.display = \'none\';\n          var tp = document.getElementById(\'msPplTogglePending\'), ts = document.getElementById(\'msPplToggleSkipped\');\n          if (tp) tp.setAttribute(\'data-active\', String(starredPending));\n          if (ts) ts.setAttribute(\'data-active\', String(starredSkipped));\n          [\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = starredPending ? \'\' : \'none\'; });\n          var skippedSec = document.getElementById(\'msPplSkippedSection\'); if (skippedSec) skippedSec.style.display = starredSkipped ? \'\' : \'none\';\n          [\'msPplUnboundHr\', \'msPplUnboundTitle\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = \'none\'; });\n          var hr = document.querySelector(\'.ms-ppl-hr\'); if (hr) hr.style.display = starredPending ? \'\' : \'none\';\n        } else {\n          starToggleLabel.textContent = \'查看重要人物\';\n          if (starIcon) starIcon.style.display = \'\';\n          sectionTitle.textContent = \'已知人物：\';\n          [\'msPplTogglePending\', \'msPplToggleUface\', \'msPplToggleSkipped\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = \'\'; });\n          var tp2 = document.getElementById(\'msPplTogglePending\'), tu2 = document.getElementById(\'msPplToggleUface\'), ts2 = document.getElementById(\'msPplToggleSkipped\');\n          var pendingActive = state._savedPendingActive !== undefined ? state._savedPendingActive : \'true\';\n          var ufaceActive   = state._savedUfaceActive   !== undefined ? state._savedUfaceActive   : \'true\';\n          var skippedActive = state._savedSkippedActive !== undefined ? state._savedSkippedActive : \'false\';\n          if (tp2) tp2.setAttribute(\'data-active\', pendingActive);\n          if (tu2) tu2.setAttribute(\'data-active\', ufaceActive);\n          if (ts2) ts2.setAttribute(\'data-active\', skippedActive);\n          [\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = (pendingActive === \'true\') ? \'\' : \'none\'; });\n          [\'msPplUnboundHr\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'].forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = (ufaceActive === \'true\') ? \'\' : \'none\'; });\n          var skippedSec2 = document.getElementById(\'msPplSkippedSection\'); if (skippedSec2) skippedSec2.style.display = (skippedActive === \'true\') ? \'\' : \'none\';\n          var hr2 = document.querySelector(\'.ms-ppl-hr\'); if (hr2) hr2.style.display = (pendingActive === \'true\') ? \'\' : \'none\';\n        }\n        renderGrid();\n      });\n    }\n\n    var searchInput = document.getElementById(\'msPplSearchInput\');\n    if (searchInput) { searchInput.addEventListener(\'input\', function () { state.searchQuery = this.value.trim(); knownPage = 1; renderKnownGrid(); }); }\n\n    var refreshBtn = document.getElementById(\'msPplRefreshBtn\');\n    if (refreshBtn) { refreshBtn.addEventListener(\'click\', function () { state.searchQuery = \'\'; knownPage = 1; pendingPage = 1; if (searchInput) searchInput.value = \'\'; renderGrid(); }); }\n\n    var sortBtn = document.getElementById(\'msPplSortBtn\'), sortPanel = document.getElementById(\'msPplSortPanel\');\n    if (sortBtn && sortPanel) { sortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); sortPanel.classList.toggle(\'show\'); }); document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplSortPanel\') && !e.target.closest(\'#msPplSortBtn\')) sortPanel.classList.remove(\'show\'); }); }\n    document.querySelectorAll(\'input[name=\"ms-ppl-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { state.sortMode = this.value; knownPage = 1; if (sortPanel) sortPanel.classList.remove(\'show\'); renderGrid(); }); });\n\n    function setSectionVisible(sectionIds, hrSelector, visible) {\n      sectionIds.forEach(function (id) { var el = document.getElementById(id); if (el) el.style.display = visible ? \'\' : \'none\'; });\n      if (hrSelector) { var hr = document.querySelector(hrSelector); if (hr) hr.style.display = visible ? \'\' : \'none\'; }\n    }\n\n    var togglePendingBtn = document.getElementById(\'msPplTogglePending\');\n    if (togglePendingBtn) {\n      togglePendingBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        setSectionVisible([\'msPplPendingToolbar\', \'msPplPendingGrid\', \'msPplPendingPagination\'], null, next);\n        var hr = document.querySelector(\'.ms-ppl-hr\'); if (hr) hr.style.display = next ? \'\' : \'none\';\n      });\n    }\n\n    var toggleUfaceBtn = document.getElementById(\'msPplToggleUface\');\n    if (toggleUfaceBtn) {\n      toggleUfaceBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        setSectionVisible([\'msPplUnboundHr\', \'msPplUfaceFilterbar\', \'msPplUfaceGrid\', \'msPplUfacePagination\'], null, next);\n      });\n    }\n\n    var toggleSkippedBtn = document.getElementById(\'msPplToggleSkipped\');\n    if (toggleSkippedBtn) {\n      toggleSkippedBtn.addEventListener(\'click\', function () {\n        var next = !(this.getAttribute(\'data-active\') === \'true\');\n        this.setAttribute(\'data-active\', String(next));\n        var section = document.getElementById(\'msPplSkippedSection\'); if (section) section.style.display = next ? \'\' : \'none\';\n        if (next) renderSkippedGrid();\n      });\n    }\n\n    var cardCtxMerge = document.getElementById(\'msPplCardCtxMerge\'); if (cardCtxMerge) { cardCtxMerge.addEventListener(\'click\', function () { if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false); hideCardCtxMenu(); }); }\n    var cardCtxStar = document.getElementById(\'msPplCardCtxStar\'); if (cardCtxStar) { cardCtxStar.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; toggleStar(state.ctxCardPerson); hideCardCtxMenu(); renderGrid(); }); }\n    var cardCtxToPending = document.getElementById(\'msPplCardCtxToPending\'); if (cardCtxToPending) { cardCtxToPending.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'pending\'); hideCardCtxMenu(); }); }\n    var cardCtxSkip = document.getElementById(\'msPplCardCtxSkip\'); if (cardCtxSkip) { cardCtxSkip.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'skipped\'); hideCardCtxMenu(); }); }\n\n    var pendingCtxConfirm = document.getElementById(\'msPplPendingCtxConfirm\'); if (pendingCtxConfirm) { pendingCtxConfirm.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'confirmed\'); hidePendingCtxMenu(); }); }\n    var pendingCtxMerge = document.getElementById(\'msPplPendingCtxMerge\'); if (pendingCtxMerge) { pendingCtxMerge.addEventListener(\'click\', function () { if (state.ctxCardPerson) openMergeModal(state.ctxCardPerson, false); hidePendingCtxMenu(); }); }\n    var pendingCtxPromote = document.getElementById(\'msPplPendingCtxPromote\');\n    if (pendingCtxPromote) {\n      pendingCtxPromote.addEventListener(\'click\', function () {\n        if (!state.ctxCardPerson) return;\n        var person = state.ctxCardPerson; hidePendingCtxMenu(); openDetail(person);\n        setTimeout(function () {\n          setVal(\'msPplEditName\', person.name); setVal(\'msPplEditRole\', person.role); setVal(\'msPplEditNotes\', person.notes);\n          state.currentAliases = (person.aliases || []).slice(); renderAliases(); syncDetailStarBtns(person);\n          setEditMode(true); renderFaceStrip(person); state.isDirty = false; state.promoteMode = true;\n        }, 50);\n      });\n    }\n    var pendingCtxStar = document.getElementById(\'msPplPendingCtxStar\');\n    if (pendingCtxStar) {\n      pendingCtxStar.addEventListener(\'click\', function () {\n        if (!state.ctxCardPerson) return; toggleStar(state.ctxCardPerson);\n        var starItem = document.getElementById(\'msPplPendingCtxStar\'); if (starItem) starItem.textContent = state.ctxCardPerson.isStarred ? \'取消重要人物\' : \'標為重要人物\';\n        hidePendingCtxMenu(); renderGrid();\n      });\n    }\n    var pendingCtxSkip = document.getElementById(\'msPplPendingCtxSkip\'); if (pendingCtxSkip) { pendingCtxSkip.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'skipped\'); hidePendingCtxMenu(); }); }\n\n    function hideSkippedCtxMenu() { var m = document.getElementById(\'msPplSkippedCtxMenu\'); if (m) m.classList.remove(\'show\'); }\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplSkippedCtxMenu\')) hideSkippedCtxMenu(); });\n    var skippedCtxConfirm = document.getElementById(\'msPplSkippedCtxConfirm\'); if (skippedCtxConfirm) { skippedCtxConfirm.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'confirmed\'); hideSkippedCtxMenu(); }); }\n    var skippedCtxToPending = document.getElementById(\'msPplSkippedCtxToPending\'); if (skippedCtxToPending) { skippedCtxToPending.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; changePersonStatus(state.ctxCardPerson, \'pending\'); hideSkippedCtxMenu(); }); }\n    var skippedCtxDelete = document.getElementById(\'msPplSkippedCtxDelete\'); if (skippedCtxDelete) { skippedCtxDelete.addEventListener(\'click\', function () { if (!state.ctxCardPerson) return; state.currentPerson = state.ctxCardPerson; hideSkippedCtxMenu(); showModal(\'msPplDeleteModal\'); }); }\n\n    var backBtn = document.getElementById(\'msPplBackBtn\');\n    if (backBtn) {\n      backBtn.addEventListener(\'click\', function () {\n        if (!state.isDirty) { renderGrid(); showView(\'msPplViewList\'); return; }\n        showDirtyLeaveModal(\n          function () {\n            var p = state.currentPerson; if (!p) return;\n            p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n            saveDraft(p);\n            if (state.promoteMode) { p.userConfirmed = true; p.userSkipped = false; }\n            apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) }).then(function () {\n              clearDraft();\n              if (state.promoteMode) { state.promoteMode = false; p.status = \'confirmed\'; var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; }); if (ip !== -1) { pendingPeople.splice(ip, 1); knownPeople.push(p); } }\n              state.isDirty = false; hideModal(\'msPplDirtyLeaveModal\'); renderGrid(); showView(\'msPplViewList\');\n            }).catch(function (e) { console.warn(\'ms-people: PATCH 失敗\', e); });\n          },\n          function () { state.isDirty = false; clearDraft(); hideModal(\'msPplDirtyLeaveModal\'); renderGrid(); showView(\'msPplViewList\'); }\n        );\n      });\n    }\n\n    var editToggle = document.getElementById(\'msPplEditToggle\');\n    if (editToggle) {\n      editToggle.addEventListener(\'click\', function () {\n        if (!state.currentPerson) return;\n        if (state.editMode) { if (state.isDirty) { showDirtyDiscardModal(function () { hideModal(\'msPplDirtyDiscardModal\'); renderDetailView(state.currentPerson); }); return; } renderDetailView(state.currentPerson); return; }\n        var p = state.currentPerson; setVal(\'msPplEditName\', p.name); setVal(\'msPplEditRole\', p.role); setVal(\'msPplEditNotes\', p.notes);\n        state.currentAliases = (p.aliases || []).slice(); renderAliases(); syncDetailStarBtns(p); setEditMode(true); renderFaceStrip(p);\n      });\n    }\n    [\'msPplEditName\', \'msPplEditRole\', \'msPplEditNotes\'].forEach(function (id) {\n      var el = document.getElementById(id); if (el) { el.addEventListener(\'input\', function () { if (state.editMode) state.isDirty = true; }); }\n    });\n\n    var saveBtn = document.getElementById(\'msPplSaveBtn\');\n    if (saveBtn) {\n      saveBtn.addEventListener(\'click\', function () {\n        var p = state.currentPerson; if (!p) return;\n        var backup = { name: p.name, role: p.role, notes: p.notes, aliases: p.aliases.slice(), isStarred: p.isStarred };\n        p.name = getVal(\'msPplEditName\') || p.name; p.role = getVal(\'msPplEditRole\'); p.notes = getVal(\'msPplEditNotes\'); p.aliases = state.currentAliases.slice();\n        saveBtn.classList.add(\'ms-ppl-saving\');\n        if (state.promoteMode) { p.userConfirmed = true; p.userSkipped = false; }\n        apiPatch(\'/identity/\' + p.id, { name: p.name, metadata: buildMetadataPatch(p) })\n          .then(function () {\n            state.isDirty = false; clearDraft();\n            if (state.promoteMode) {\n              state.promoteMode = false; p.status = \'confirmed\';\n              var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; });\n              if (ip !== -1) { pendingPeople.splice(ip, 1); knownPeople.push(p); }\n              renderGrid(); showView(\'msPplViewList\');\n            } else { renderDetailView(p); renderGrid(); }\n          }).catch(function (e) {\n            console.warn(\'ms-people: PATCH identity 失敗\', e);\n            p.name = backup.name; p.role = backup.role; p.notes = backup.notes; p.aliases = backup.aliases; p.isStarred = backup.isStarred;\n            alert(\'儲存失敗，資料已暫存，請稍後再試\');\n          }).finally(function () { saveBtn.classList.remove(\'ms-ppl-saving\'); });\n      });\n    }\n\n    var cancelBtn = document.getElementById(\'msPplCancelBtn\');\n    if (cancelBtn) {\n      cancelBtn.addEventListener(\'click\', function () {\n        if (state.isDirty) { showDirtyDiscardModal(function () { hideModal(\'msPplDirtyDiscardModal\'); clearDraft(); if (state.currentPerson) renderDetailView(state.currentPerson); else setEditMode(false); }); return; }\n        if (state.currentPerson) renderDetailView(state.currentPerson); else setEditMode(false);\n      });\n    }\n\n    var addAliasBtn = document.getElementById(\'msPplAddAlias\'), aliasInlineWrap = document.getElementById(\'msPplAliasInlineWrap\'), aliasInlineInput = document.getElementById(\'msPplAliasInlineInput\');\n    if (addAliasBtn) { addAliasBtn.addEventListener(\'click\', function () { if (!aliasInlineWrap || !aliasInlineInput) return; aliasInlineWrap.style.display = \'flex\'; aliasInlineInput.value = \'\'; aliasInlineInput.focus(); addAliasBtn.style.display = \'none\'; }); }\n\n    var starBtn = document.getElementById(\'msPplStarBtn\');\n    if (starBtn) { starBtn.addEventListener(\'click\', function () { if (!state.currentPerson) return; toggleStar(state.currentPerson); syncDetailStarBtns(state.currentPerson); renderGrid(); showToast(state.currentPerson.isStarred ? \'已標記為重要人物\' : \'已取消重要人物\'); }); }\n\n    var starBtnEdit = document.getElementById(\'msPplStarBtnEdit\');\n    if (starBtnEdit) { starBtnEdit.addEventListener(\'click\', function () { if (!state.currentPerson) return; toggleStar(state.currentPerson); syncDetailStarBtns(state.currentPerson); renderGrid(); showToast(state.currentPerson.isStarred ? \'已標記為重要人物\' : \'已取消重要人物\'); }); }\n\n    var addTagBtn = document.getElementById(\'msPplAddTagBtn\');\n    if (addTagBtn) {\n      addTagBtn.addEventListener(\'click\', function () {\n        if (!state.currentPerson) return; var p = state.currentPerson;\n        setVal(\'msPplEditName\', p.name); setVal(\'msPplEditRole\', p.role); setVal(\'msPplEditNotes\', p.notes);\n        state.currentAliases = (p.aliases || []).slice(); renderAliases(); syncDetailStarBtns(p); setEditMode(true); renderFaceStrip(p);\n        setTimeout(function () { if (addAliasBtn) addAliasBtn.click(); }, 50);\n      });\n    }\n\n    if (aliasInlineInput) {\n      aliasInlineInput.addEventListener(\'keydown\', function (e) {\n        if (e.key === \'Enter\') {\n          e.preventDefault(); var val = aliasInlineInput.value.trim();\n          var localeEl = document.getElementById(\'msPplAliasLocaleSelect\'); var locale = localeEl ? localeEl.value : \'zh-TW\';\n          if (val) { state.currentAliases.push({ locale: locale, name: val }); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); }\n          aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\';\n        }\n        if (e.key === \'Escape\') { aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\'; }\n      });\n      aliasInlineInput.addEventListener(\'blur\', function (e) {\n        var localeEl = document.getElementById(\'msPplAliasLocaleSelect\');\n        if (localeEl && e.relatedTarget === localeEl) return;\n        var val = aliasInlineInput.value.trim(); var locale = localeEl ? localeEl.value : \'zh-TW\';\n        if (val) { state.currentAliases.push({ locale: locale, name: val }); renderAliases(); state.isDirty = true; saveDraft(state.currentPerson); }\n        aliasInlineWrap.style.display = \'none\'; aliasInlineInput.value = \'\'; if (addAliasBtn) addAliasBtn.style.display = \'\';\n      });\n    }\n\n    var removeConfirm = document.getElementById(\'msPplRemoveConfirm\');\n    if (removeConfirm) {\n      removeConfirm.addEventListener(\'click\', function () {\n        if (state.ctxFmId && state.currentPerson) {\n          var fm = (state.currentPerson.face_members || []).find(function (f) { return f.id === state.ctxFmId; });\n          if (fm) { state.currentPerson.face_members = state.currentPerson.face_members.filter(function (f) { return f.id !== state.ctxFmId; }); state.currentPerson.thumb = null; pendingPeople.unshift({ id: \'pending-\' + Date.now(), name: \'\', thumb: null, isNew: false, isStarred: false, aliases: [], role: \'\', notes: \'\', addedAt: new Date(), lastViewed: null, face_members: [fm], media: [] }); state.ctxFmId = null; renderDetailView(state.currentPerson); renderPendingGrid(); }\n        }\n        hideModal(\'msPplRemoveModal\');\n      });\n    }\n    var removeCancel = document.getElementById(\'msPplRemoveCancel\'); if (removeCancel) { removeCancel.addEventListener(\'click\', function () { hideModal(\'msPplRemoveModal\'); }); }\n\n    var stripAddBtn = document.getElementById(\'msPplStripAddBtn\'); if (stripAddBtn) { stripAddBtn.addEventListener(\'click\', function () { if (!state.currentPerson) return; openMergeModal(state.currentPerson, true); }); }\n\n    var mergeSearchInput = document.getElementById(\'msMergeSearchInput\'); if (mergeSearchInput) { mergeSearchInput.addEventListener(\'input\', function () { renderMergeGrid(this.value.trim()); }); }\n    var mergeCancel = document.getElementById(\'msMergeCancel\'); if (mergeCancel) { mergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplMergeModal\'); state.mergeTarget = null; }); }\n    var mergeConfirm = document.getElementById(\'msMergeConfirm\'); if (mergeConfirm) { mergeConfirm.addEventListener(\'click\', function () { if (!state.mergeTarget) return; hideModal(\'msPplMergeModal\'); showModal(\'msPplConfirmMergeModal\'); }); }\n\n    var confirmMergeOk = document.getElementById(\'msPplConfirmMergeOk\');\n    if (confirmMergeOk) {\n      confirmMergeOk.addEventListener(\'click\', function () {\n        if (state.mergeSource && state.mergeTarget) {\n          var all = knownPeople.concat(pendingPeople);\n          var target = all.find(function (p) { return p.id === state.mergeTarget; });\n          var source = state.mergeSource;\n          if (target && source) {\n            var sourceStatusBeforeMerge = source.status;\n            apiPost(\'/identity/\' + source.id + \'/mergeinto\', { into_uuid: target.id, keep_history: true })\n  .then(function (res) {\n    var transferred = (res && res.data && res.data.faces_transferred != null) ? res.data.faces_transferred : null;\n    var mergeId     = (res && res.data && res.data.merge_id)                  ? res.data.merge_id          : null;\n    showMergeUndoToast(transferred, mergeId, source, target, sourceStatusBeforeMerge);\n  })\n  .catch(function (e) { console.warn(\'ms-people: mergeinto 失敗\', e); showToast(\'合併失敗，請稍後再試\'); });\n            target.face_members = (target.face_members || []).concat(source.face_members || []);\n            target.media = (target.media || []).concat(source.media || []);\n            if (!target.thumb && source.thumb) target.thumb = source.thumb;\n            _detailCache[target.id] = false; clearPersonCache(source);\n            var ik = knownPeople.findIndex(function (p) { return p.id === source.id; }); if (ik !== -1) knownPeople.splice(ik, 1);\n            var ip = pendingPeople.findIndex(function (p) { return p.id === source.id; }); if (ip !== -1) pendingPeople.splice(ip, 1);\n          }\n        }\n        hideModal(\'msPplConfirmMergeModal\'); state.mergeSource = null; state.mergeTarget = null;\n        knownPage = 1; pendingPage = 1; renderGrid(); showView(\'msPplViewList\');\n      });\n    }\n    var confirmMergeCancel = document.getElementById(\'msPplConfirmMergeCancel\'); if (confirmMergeCancel) { confirmMergeCancel.addEventListener(\'click\', function () { hideModal(\'msPplConfirmMergeModal\'); showModal(\'msPplMergeModal\'); }); }\n\n    // ✅ 大頭照上傳：走 PHP proxy\n    var avatarEl = document.getElementById(\'msPplAvatar\');\n    var avatarInput = document.getElementById(\'msPplAvatarInput\');\n    if (avatarEl && avatarInput) {\n      avatarEl.addEventListener(\'click\', function () { if (!state.currentPerson) return; avatarInput.value = \'\'; avatarInput.click(); });\n      avatarInput.addEventListener(\'change\', function () {\n        var file = avatarInput.files[0]; if (!file || !state.currentPerson) return;\n        var person = state.currentPerson;\n        var formData = new FormData(); formData.append(\'image\', file);\n        avatarEl.style.opacity = \'0.5\';\n        fetch(\'/wp-json/momentry/v1/proxy/identity/\' + person.id + \'/profile-image\', {\n  		method: \'POST\',\n  		credentials: \'same-origin\',\n  		headers: {},\n		body: formData,\n					}).then(function (r) {\n          if (!r.ok) throw new Error(\'HTTP \' + r.status);\n          var blobUrl = URL.createObjectURL(file);\n          if (person.thumb && person.thumb.startsWith(\'blob:\')) URL.revokeObjectURL(person.thumb);\n          person.thumb = blobUrl; person._hasProfileImage = true;\n          avatarEl.innerHTML = \'\'; avatarEl.appendChild(makeImg(blobUrl));\n          var hint = document.createElement(\'div\'); hint.className = \'ms-ppl-avatar-upload-hint\';\n          hint.innerHTML = \'<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle cx=\"12\" cy=\"13\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1.8\"/></svg>\';\n          avatarEl.appendChild(hint);\n          var card = document.querySelector(\'.ms-ppl-face-card[data-person-id=\"\' + person.id + \'\"]\');\n          if (card && person.thumb) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg\'); if (existing) existing.replaceWith(makeImg(person.thumb)); } }\n          showToast(\'大頭照已更新\');\n        }).catch(function (e) { console.warn(\'ms-people: 上傳大頭照失敗\', e); showToast(\'上傳失敗，請稍後再試\'); })\n          .finally(function () { avatarEl.style.opacity = \'\'; });\n      });\n    }\n\n    var deleteBtn = document.getElementById(\'msPplDeleteBtn\'); if (deleteBtn) { deleteBtn.addEventListener(\'click\', function () { if (state.currentPerson) showModal(\'msPplDeleteModal\'); }); }\n    var deleteCancel = document.getElementById(\'msPplDeleteCancel\'); if (deleteCancel) { deleteCancel.addEventListener(\'click\', function () { hideModal(\'msPplDeleteModal\'); }); }\n\n    var deleteConfirm = document.getElementById(\'msPplDeleteConfirm\');\n    if (deleteConfirm) {\n      deleteConfirm.addEventListener(\'click\', function () {\n        var p = state.currentPerson; if (!p) return;\n        deleteConfirm.classList.add(\'ms-ppl-saving\');\n        apiDelete(\'/identity/\' + p.id).then(function () {\n          var ik = knownPeople.findIndex(function (x) { return x.id === p.id; }); if (ik !== -1) knownPeople.splice(ik, 1);\n          var ip = pendingPeople.findIndex(function (x) { return x.id === p.id; }); if (ip !== -1) pendingPeople.splice(ip, 1);\n          var is = skippedPeople.findIndex(function (x) { return x.id === p.id; }); if (is !== -1) skippedPeople.splice(is, 1);\n          clearPersonCache(p); state.currentPerson = null; state.isDirty = false; knownPage = 1; pendingPage = 1;\n          hideModal(\'msPplDeleteModal\'); renderGrid(); showView(\'msPplViewList\');\n        }).catch(function (e) { console.warn(\'ms-people: DELETE identity 失敗\', e); deleteConfirm.classList.remove(\'ms-ppl-saving\'); hideModal(\'msPplDeleteModal\'); alert(\'刪除失敗，請稍後再試\'); });\n      });\n    }\n\n    var dirtyLeaveDiscard = document.getElementById(\'msPplDirtyLeaveDiscard\'); if (dirtyLeaveDiscard) { dirtyLeaveDiscard.addEventListener(\'click\', function () { hideModal(\'msPplDirtyLeaveModal\'); if (_dirtyLeaveCallback && _dirtyLeaveCallback.onLeave) _dirtyLeaveCallback.onLeave(); _dirtyLeaveCallback = null; }); }\n    var dirtyLeaveSave = document.getElementById(\'msPplDirtyLeaveSave\'); if (dirtyLeaveSave) { dirtyLeaveSave.addEventListener(\'click\', function () { if (_dirtyLeaveCallback && _dirtyLeaveCallback.onSave) _dirtyLeaveCallback.onSave(); _dirtyLeaveCallback = null; }); }\n    var dirtyDiscardCancel = document.getElementById(\'msPplDirtyDiscardCancel\'); if (dirtyDiscardCancel) { dirtyDiscardCancel.addEventListener(\'click\', function () { hideModal(\'msPplDirtyDiscardModal\'); _dirtyDiscardCallback = null; }); }\n    var dirtyDiscardOk = document.getElementById(\'msPplDirtyDiscardOk\'); if (dirtyDiscardOk) { dirtyDiscardOk.addEventListener(\'click\', function () { if (_dirtyDiscardCallback) _dirtyDiscardCallback(); _dirtyDiscardCallback = null; }); }\n\n    function closeVideoModal() {\n      var modal = document.getElementById(\'msPplVideoModal\'), videoEl = document.getElementById(\'msPplVideoEl\');\n      if (videoEl) { videoEl.pause(); videoEl.removeAttribute(\'src\'); videoEl.load(); }\n      if (modal) { modal.classList.remove(\'show\'); if (modal._blobUrl) { URL.revokeObjectURL(modal._blobUrl); modal._blobUrl = null; } }\n    }\n    var videoClose = document.getElementById(\'msPplVideoClose\'); if (videoClose) { videoClose.addEventListener(\'click\', closeVideoModal); }\n    var videoModal = document.getElementById(\'msPplVideoModal\'); if (videoModal) { videoModal.addEventListener(\'click\', function (e) { if (e.target === this) closeVideoModal(); }); }\n\n    // ── 待定人臉 ──────────────────────────────────────────────\n    var uboundFaces = [], uboundLoaded = false, uboundPage = 1, UFACE_PAGE = 30, uboundCtxFace = null, uboundAssignTarget = null;\n    var BINDING_STATES = [\'stranger\', \'dangling\', \'unbound\'];\n    var BINDING_LABELS = {\n      stranger: { label: \'Stranger\', color: \'#6b7280\' },\n      dangling: { label: \'Dangling\', color: \'#d97706\' },\n      unbound:  { label: \'Unbound\',  color: \'#9ca3af\' },\n    };\n\n    function loadUnboundFaces(force) {\n      if (uboundLoaded && !force) return;\n      var fileUuidSet = {};\n      knownPeople.concat(pendingPeople).forEach(function (p) { (p.media || []).forEach(function (m) { if (m.file_uuid) fileUuidSet[m.file_uuid] = true; }); });\n      var fileUuids = Object.keys(fileUuidSet);\n      if (!fileUuids.length) {\n        var identities = knownPeople.concat(pendingPeople).slice(0, 20);\n        Promise.all(identities.map(function (p) { return apiFetch(\'/identity/\' + p.id + \'/files\').catch(function () { return null; }); })).then(function (results) {\n          results.forEach(function (body) { if (!body) return; var files = body.data || body.files || []; files.forEach(function (f) { if (f.file_uuid) fileUuidSet[f.file_uuid] = true; }); });\n          fetchUnboundFromFiles(Object.keys(fileUuidSet));\n        });\n        return;\n      }\n      fetchUnboundFromFiles(fileUuids);\n    }\n\n    function fetchUnboundFromFiles(fileUuids) {\n      if (!fileUuids.length) { uboundLoaded = true; renderUnboundGrid(); return; }\n      var fileNameMap = {};\n      apiFetch(\'/files/scan\').then(function (body) {\n        if (body && Array.isArray(body.files)) { body.files.forEach(function (f) { if (f.file_uuid && f.file_name) fileNameMap[f.file_uuid] = f.file_name.replace(/\\.[^.]+$/, \'\'); }); }\n      }).catch(function () {}).then(function () {\n        var PAGE = 200;\n        function fetchOnePage(fileUuid, binding, page) { return apiFetch(\'/file/\' + fileUuid + \'/faces?binding=\' + binding + \'&page=\' + page + \'&page_size=\' + PAGE).catch(function () { return null; }); }\n        var allPromises = [];\n        fileUuids.forEach(function (fileUuid) {\n          BINDING_STATES.forEach(function (binding) {\n            allPromises.push(fetchOnePage(fileUuid, binding, 1).then(function (body) {\n              if (!body || !Array.isArray(body.data)) return [];\n              var faces = body.data.map(function (f) { f._fileUuid = fileUuid; f._bindingState = binding; f.file_uuid = fileUuid; f.file_name = fileNameMap[fileUuid] || null; return f; });\n              var total = body.total || 0, totalPages = Math.ceil(total / PAGE);\n              if (totalPages <= 1) return faces;\n              var remaining = [];\n              for (var p = 2; p <= Math.min(totalPages, 10); p++) remaining.push(fetchOnePage(fileUuid, binding, p));\n              return Promise.all(remaining).then(function (pages) {\n                pages.forEach(function (b) { if (b && Array.isArray(b.data)) { b.data.forEach(function (f) { f._fileUuid = fileUuid; f._bindingState = binding; f.file_uuid = fileUuid; f.file_name = fileNameMap[fileUuid] || null; faces.push(f); }); } });\n                return faces;\n              });\n            }));\n          });\n        });\n        Promise.all(allPromises).then(function (groups) {\n          var seen = {}, result = [];\n          groups.forEach(function (faces) { (faces || []).forEach(function (f) { var key = (f.file_uuid || \'\') + \'|\' + (f.trace_id || f.face_id || f.id || \'\'); if (!seen[key]) { seen[key] = true; result.push(f); } }); });\n          uboundFaces = result; uboundLoaded = true; uboundPage = 1; renderUnboundGrid();\n        }).catch(function (e) { console.warn(\'ms-people: fetchUnboundFromFiles 失敗\', e); });\n      });\n    }\n\n    function getFilteredUnbound() {\n      var q = ((document.getElementById(\'msPplUfaceSearchInput\') || {}).value || \'\').trim().toLowerCase();\n      var list = uboundFaces.slice();\n      if (q) { list = list.filter(function (f) { return (f.file_name || f.file_uuid || \'\').toLowerCase().indexOf(q) !== -1; }); }\n      var sortEl = document.querySelector(\'input[name=\"ms-uface-sort\"]:checked\');\n      var sort = sortEl ? sortEl.value : \'name_az\';\n      if (sort === \'name_az\') { list.sort(function (a, b) { return (a.file_name || a.file_uuid || \'\').toLowerCase().localeCompare((b.file_name || b.file_uuid || \'\').toLowerCase()); }); }\n      else if (sort === \'name_za\') { list.sort(function (a, b) { return (b.file_name || b.file_uuid || \'\').toLowerCase().localeCompare((a.file_name || a.file_uuid || \'\').toLowerCase()); }); }\n      else if (sort === \'time_desc\') { list.sort(function (a, b) { return (b.timestamp_secs || 0) - (a.timestamp_secs || 0); }); }\n      else if (sort === \'time_asc\') { list.sort(function (a, b) { return (a.timestamp_secs || 0) - (b.timestamp_secs || 0); }); }\n      return list;\n    }\n\n    function renderUnboundGrid() {\n      var grid = document.getElementById(\'msPplUfaceGrid\'); if (!grid) return; grid.innerHTML = \'\';\n      var list = getFilteredUnbound();\n      if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">\' + (uboundLoaded ? \'沒有符合的人臉\' : \'目前沒有待定人臉\') + \'</div>\'; var pg = document.getElementById(\'msPplUfacePagination\'); if (pg) pg.innerHTML = \'\'; return; }\n      var start = (uboundPage - 1) * UFACE_PAGE, pageList = list.slice(start, start + UFACE_PAGE);\n      pageList.forEach(function (face) { grid.appendChild(makeUnboundCard(face)); });\n      renderPagination(\'msPplUfacePagination\', uboundPage, list.length, function (p) { uboundPage = p; renderUnboundGrid(); grid.scrollIntoView({ behavior: \'smooth\', block: \'start\' }); });\n      loadUnboundThumbs(pageList);\n    }\n\n    function makeUnboundCard(face) {\n      var card = document.createElement(\'div\'); card.className = \'ms-ppl-face-card\';\n      var _faceKey = face.trace_id != null ? face.trace_id : face.id;\n      card.dataset.faceId = _faceKey != null ? String(_faceKey) : \'\';\n      var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-ppl-face-img-wrap\'; imgWrap.innerHTML = SILHOUETTE_SVG;\n      var bindingState = face._bindingState || \'unbound\';\n      var stateInfo = BINDING_LABELS[bindingState] || BINDING_LABELS[\'unbound\'];\n      var stateBadge = document.createElement(\'div\');\n      stateBadge.style.cssText = \'position:absolute;top:6px;left:6px;background:\' + stateInfo.color + \';color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.03em;z-index:2;opacity:0.85;\';\n      stateBadge.textContent = stateInfo.label; imgWrap.appendChild(stateBadge);\n      card.appendChild(imgWrap);\n      var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-ppl-face-name pending-name\';\n      nameEl.textContent = face.file_name ? face.file_name.split(\'/\').pop().replace(/\\.[^.]+$/, \'\') : (face.file_uuid ? face.file_uuid.slice(0, 8) + \'…\' : \'—\'); card.appendChild(nameEl);\n      if (face.timestamp_secs != null) { var tsEl = document.createElement(\'div\'); tsEl.className = \'ms-uface-file-name\'; tsEl.textContent = formatSecs(Math.round(face.timestamp_secs)); card.appendChild(tsEl); }\n      card.addEventListener(\'contextmenu\', function (e) {\n        e.preventDefault(); e.stopPropagation(); uboundCtxFace = face;\n        var menu = document.getElementById(\'msPplUfaceCtxMenu\'); if (!menu) return;\n        menu.classList.add(\'show\');\n        menu.style.left = ((e.clientX + 160 > window.innerWidth) ? e.clientX - 160 : e.clientX) + \'px\';\n        menu.style.top  = ((e.clientY + 90  > window.innerHeight) ? e.clientY - 90  : e.clientY) + \'px\';\n      });\n      return card;\n    }\n\n    function loadUnboundThumbs(faces) {\n      var factories = faces.filter(function (f) { return !f._thumb && !f._thumbLoading && f.file_uuid && f.trace_id; }).map(function (face) {\n        face._thumbLoading = true;\n        return function () {\n          var tid = face.trace_id || face.id;\n          return fetch(\'/?ms_proxy=thumbnail&file_uuid=\' + face.file_uuid + \'&trace_id=\' + tid).then(function (r) {\n            if (!r.ok) return;\n            return r.blob().then(function (blob) {\n              face._thumb = URL.createObjectURL(blob);\n              var card = document.querySelector(\'.ms-uface-grid .ms-ppl-face-card[data-face-id=\"\' + (face.trace_id != null ? face.trace_id : face.id) + \'\"]\');\n              if (card) { var imgWrap = card.querySelector(\'.ms-ppl-face-img-wrap\'); if (imgWrap) { var existing = imgWrap.querySelector(\'img, svg.ms-silhouette\'); var img = document.createElement(\'img\'); img.src = face._thumb; img.onerror = function () { if (this.parentNode) this.parentNode.innerHTML = SILHOUETTE_SVG; }; if (existing) existing.replaceWith(img); else imgWrap.insertBefore(img, imgWrap.firstChild); } }\n            });\n          }).catch(function () { face._thumbLoading = false; });\n        };\n      });\n      throttledPool(factories, 5);\n    }\n\n    function openUfaceAssignModal(face) {\n      uboundAssignTarget = null;\n      var triggerEl = document.getElementById(\'msUfaceAssignTrigger\');\n      if (triggerEl) { if (face._thumb) { triggerEl.innerHTML = \'\'; var img = document.createElement(\'img\'); img.src = face._thumb; triggerEl.appendChild(img); } else { triggerEl.innerHTML = SILHOUETTE_SVG; } }\n      var searchEl = document.getElementById(\'msUfaceAssignSearch\'); if (searchEl) searchEl.value = \'\';\n      renderUfaceAssignGrid(\'\'); showModal(\'msPplUfaceAssignModal\');\n    }\n\n    function renderUfaceAssignGrid(query) {\n      var grid = document.getElementById(\'msUfaceAssignGrid\'); if (!grid) return; grid.innerHTML = \'\';\n      var list = knownPeople.filter(function (p) { if (!query) return true; return (p.name || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1 || (p.aliases || []).some(function (a) { return (a.name || \'\').toLowerCase().indexOf(query.toLowerCase()) !== -1; }); })\n        .sort(function (a, b) { return (a.name || \'\').localeCompare(b.name || \'\', undefined, { sensitivity: \'base\' }); });\n      if (!list.length) { grid.innerHTML = \'<div style=\"font-size:13px;color:#9aa0a6;padding:8px 0;\">沒有符合的人物</div>\'; return; }\n      var row = document.createElement(\'div\'); row.style.cssText = \'display:flex;flex-wrap:wrap;gap:16px;width:100%;\';\n      list.forEach(function (person) {\n        var card = document.createElement(\'div\'); card.className = \'ms-merge-face-card\' + (uboundAssignTarget === person.id ? \' selected\' : \'\'); card.dataset.personId = person.id;\n        var imgWrap = document.createElement(\'div\'); imgWrap.className = \'ms-merge-face-img\';\n        if (person.thumb) { var img = document.createElement(\'img\'); img.src = person.thumb; imgWrap.appendChild(img); } else { imgWrap.innerHTML = SILHOUETTE_SVG; }\n        var nameEl = document.createElement(\'div\'); nameEl.className = \'ms-merge-face-name\'; nameEl.textContent = person.name || \'（未命名）\';\n        card.appendChild(imgWrap); card.appendChild(nameEl);\n        card.addEventListener(\'click\', function () { uboundAssignTarget = person.id; grid.querySelectorAll(\'.ms-merge-face-card\').forEach(function (c) { c.classList.toggle(\'selected\', c.dataset.personId === person.id); }); });\n        row.appendChild(card);\n      });\n      grid.appendChild(row);\n    }\n\n    document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplUfaceCtxMenu\')) { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); } });\n    var ufaceSearch = document.getElementById(\'msPplUfaceSearchInput\'); if (ufaceSearch) { ufaceSearch.addEventListener(\'input\', function () { uboundPage = 1; renderUnboundGrid(); }); }\n\n    var ufaceSortBtn = document.getElementById(\'msPplUfaceSortBtn\'), ufaceSortPanel = document.getElementById(\'msPplUfaceSortPanel\');\n    if (ufaceSortBtn && ufaceSortPanel) {\n      ufaceSortBtn.addEventListener(\'click\', function (e) { e.stopPropagation(); ufaceSortPanel.classList.toggle(\'show\'); });\n      document.addEventListener(\'click\', function (e) { if (!e.target.closest(\'#msPplUfaceSortPanel\') && !e.target.closest(\'#msPplUfaceSortBtn\')) ufaceSortPanel.classList.remove(\'show\'); });\n    }\n    document.querySelectorAll(\'input[name=\"ms-uface-sort\"]\').forEach(function (radio) { radio.addEventListener(\'change\', function () { uboundPage = 1; if (ufaceSortPanel) ufaceSortPanel.classList.remove(\'show\'); renderUnboundGrid(); }); });\n\n    var ufaceCtxAssign = document.getElementById(\'msPplUfaceCtxAssign\'); if (ufaceCtxAssign) { ufaceCtxAssign.addEventListener(\'click\', function () { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); if (uboundCtxFace) openUfaceAssignModal(uboundCtxFace); }); }\n    var ufaceCtxNew = document.getElementById(\'msPplUfaceCtxNew\');\n    if (ufaceCtxNew) {\n      ufaceCtxNew.addEventListener(\'click\', function () {\n        var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\');\n        var face = uboundCtxFace; if (!face) return;\n        var fm = { id: face.trace_id || face.id, numeric_id: face.trace_id || face.id, thumb: face._thumb || null, file_uuid: face.file_uuid, trace_id: face.trace_id || face.id, confidence: face.confidence };\n        var newPerson = { id: \'p-new-\' + Date.now(), name: \'\', thumb: fm.thumb, isNew: true, isStarred: false, aliases: [], role: \'\', notes: \'\', addedAt: new Date(), lastViewed: null, face_members: [fm], media: [] };\n        knownPeople.unshift(newPerson); uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== (face.trace_id || face.id); });\n        renderUnboundGrid(); renderKnownGrid(); openDetail(newPerson);\n        setTimeout(function () { var et = document.getElementById(\'msPplEditToggle\'); if (et) et.click(); }, 100);\n      });\n    }\n    var ufaceCtxIgnore = document.getElementById(\'msPplUfaceCtxIgnore\'); if (ufaceCtxIgnore) { ufaceCtxIgnore.addEventListener(\'click\', function () { var m = document.getElementById(\'msPplUfaceCtxMenu\'); if (m) m.classList.remove(\'show\'); var face = uboundCtxFace; if (!face) return; uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== (face.trace_id || face.id); }); uboundCtxFace = null; renderUnboundGrid(); }); }\n\n    var ufaceAssignSearch = document.getElementById(\'msUfaceAssignSearch\'); if (ufaceAssignSearch) { ufaceAssignSearch.addEventListener(\'input\', function () { renderUfaceAssignGrid(this.value.trim()); }); }\n    var ufaceAssignCancel = document.getElementById(\'msUfaceAssignCancel\'); if (ufaceAssignCancel) { ufaceAssignCancel.addEventListener(\'click\', function () { hideModal(\'msPplUfaceAssignModal\'); uboundAssignTarget = null; uboundCtxFace = null; }); }\n    var ufaceAssignConfirm = document.getElementById(\'msUfaceAssignConfirm\');\n    if (ufaceAssignConfirm) {\n      ufaceAssignConfirm.addEventListener(\'click\', function () {\n        if (!uboundAssignTarget || !uboundCtxFace) return;\n        var face = uboundCtxFace, person = knownPeople.find(function (p) { return p.id === uboundAssignTarget; });\n        if (!person) { person = pendingPeople.find(function (p) { return p.id === uboundAssignTarget; }); } if (!person) return;\n        var tid = face.trace_id != null ? face.trace_id : face.id;\n        apiPost(\'/identity/\' + person.id + \'/bind/trace\', { file_uuid: face.file_uuid, trace_id: tid }).catch(function (e) { console.warn(\'ms-people: bind/trace 失敗\', tid, e); });\n        person.face_members = (person.face_members || []).concat([{ id: tid, numeric_id: tid, thumb: face._thumb || null, file_uuid: face.file_uuid, trace_id: tid, confidence: face.confidence }]);\n        if (!person.thumb && face._thumb) person.thumb = face._thumb; _detailCache[person.id] = false;\n        uboundFaces = uboundFaces.filter(function (f) { return (f.trace_id || f.id) !== tid; }); uboundCtxFace = null; uboundAssignTarget = null;\n        hideModal(\'msPplUfaceAssignModal\'); renderUnboundGrid(); renderGrid();\n      });\n    }\n\n    loadUnboundFaces();\n  }\n\n  function init() {\n    if (!document.getElementById(\'msPplUnassignedGrid\')) return;\n    bindEvents(); renderGrid();\n  }\n\n  if (document.readyState === \'loading\') { document.addEventListener(\'DOMContentLoaded\', init); } else { init(); }\n\n})();\n	\n	</script>\n  <?php\n}, 25);','','global',0,10,1,'2026-05-29 09:54:34',1,NULL);
/*!40000 ALTER TABLE `wp_snippets` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_term_relationships`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_term_relationships` (
  `object_id` bigint(20) unsigned NOT NULL DEFAULT 0,
  `term_taxonomy_id` bigint(20) unsigned NOT NULL DEFAULT 0,
  `term_order` int(11) NOT NULL DEFAULT 0,
  PRIMARY KEY (`object_id`,`term_taxonomy_id`),
  KEY `term_taxonomy_id` (`term_taxonomy_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_term_relationships` WRITE;
/*!40000 ALTER TABLE `wp_term_relationships` DISABLE KEYS */;
INSERT INTO `wp_term_relationships` VALUES
(1,1,0),
(7,2,0),
(31,2,0),
(55,2,0),
(57,2,0),
(57,3,0),
(62,2,0),
(77,2,0),
(77,4,0),
(1540,1,0),
(1542,1,0);
/*!40000 ALTER TABLE `wp_term_relationships` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_term_taxonomy`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_term_taxonomy` (
  `term_taxonomy_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `term_id` bigint(20) unsigned NOT NULL DEFAULT 0,
  `taxonomy` varchar(32) NOT NULL DEFAULT '',
  `description` longtext NOT NULL,
  `parent` bigint(20) unsigned NOT NULL DEFAULT 0,
  `count` bigint(20) NOT NULL DEFAULT 0,
  PRIMARY KEY (`term_taxonomy_id`),
  UNIQUE KEY `term_id_taxonomy` (`term_id`,`taxonomy`),
  KEY `taxonomy` (`taxonomy`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_term_taxonomy` WRITE;
/*!40000 ALTER TABLE `wp_term_taxonomy` DISABLE KEYS */;
INSERT INTO `wp_term_taxonomy` VALUES
(1,1,'category','',0,2),
(2,2,'wp_theme','',0,6),
(3,3,'wp_template_part_area','',0,1),
(4,4,'wp_template_part_area','',0,1);
/*!40000 ALTER TABLE `wp_term_taxonomy` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_termmeta`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_termmeta` (
  `meta_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `term_id` bigint(20) unsigned NOT NULL DEFAULT 0,
  `meta_key` varchar(255) DEFAULT NULL,
  `meta_value` longtext DEFAULT NULL,
  PRIMARY KEY (`meta_id`),
  KEY `term_id` (`term_id`),
  KEY `meta_key` (`meta_key`(191))
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_termmeta` WRITE;
/*!40000 ALTER TABLE `wp_termmeta` DISABLE KEYS */;
/*!40000 ALTER TABLE `wp_termmeta` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_terms`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_terms` (
  `term_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(200) NOT NULL DEFAULT '',
  `slug` varchar(200) NOT NULL DEFAULT '',
  `term_group` bigint(10) NOT NULL DEFAULT 0,
  PRIMARY KEY (`term_id`),
  KEY `slug` (`slug`(191)),
  KEY `name` (`name`(191))
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_terms` WRITE;
/*!40000 ALTER TABLE `wp_terms` DISABLE KEYS */;
INSERT INTO `wp_terms` VALUES
(1,'Uncategorized','uncategorized',0),
(2,'twentytwentyfive','twentytwentyfive',0),
(3,'header','header',0),
(4,'footer','footer',0);
/*!40000 ALTER TABLE `wp_terms` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_usermeta`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_usermeta` (
  `umeta_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` bigint(20) unsigned NOT NULL DEFAULT 0,
  `meta_key` varchar(255) DEFAULT NULL,
  `meta_value` longtext DEFAULT NULL,
  PRIMARY KEY (`umeta_id`),
  KEY `user_id` (`user_id`),
  KEY `meta_key` (`meta_key`(191))
) ENGINE=InnoDB AUTO_INCREMENT=286 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_usermeta` WRITE;
/*!40000 ALTER TABLE `wp_usermeta` DISABLE KEYS */;
INSERT INTO `wp_usermeta` VALUES
(1,1,'nickname','wp_user'),
(2,1,'first_name',''),
(3,1,'last_name',''),
(4,1,'description',''),
(5,1,'rich_editing','true'),
(6,1,'syntax_highlighting','true'),
(7,1,'comment_shortcuts','false'),
(8,1,'admin_color','modern'),
(9,1,'use_ssl','0'),
(10,1,'show_admin_bar_front','true'),
(11,1,'locale',''),
(12,1,'wp_capabilities','a:1:{s:13:\"administrator\";b:1;}'),
(13,1,'wp_user_level','10'),
(14,1,'dismissed_wp_pointers',''),
(15,1,'show_welcome_panel','1'),
(17,1,'wp_dashboard_quick_press_last_post_id','1754'),
(18,1,'community-events-location','a:1:{s:2:\"ip\";s:12:\"59.124.167.0\";}'),
(33,1,'wp_persisted_preferences','a:5:{s:4:\"core\";a:3:{s:26:\"isComplementaryAreaVisible\";b:1;s:24:\"enableChoosePatternModal\";b:1;s:14:\"renderingModes\";a:1:{s:16:\"twentytwentyfive\";a:1:{s:4:\"page\";s:15:\"template-locked\";}}}s:14:\"core/edit-post\";a:2:{s:12:\"welcomeGuide\";b:0;s:20:\"welcomeGuideTemplate\";b:0;}s:9:\"_modified\";s:24:\"2026-05-25T11:33:56.145Z\";s:14:\"core/edit-site\";a:2:{s:12:\"welcomeGuide\";b:0;s:16:\"welcomeGuidePage\";b:0;}s:17:\"core/block-editor\";a:1:{s:25:\"linkControlSettingsDrawer\";b:1;}}'),
(34,1,'elementor_introduction','a:1:{s:27:\"ai-get-started-announcement\";b:1;}'),
(57,1,'ignore_code_snippets_survey_message','survey'),
(62,4,'nickname','Wendy Wen'),
(63,4,'first_name','Wendy'),
(64,4,'last_name','Wen'),
(65,4,'description',''),
(66,4,'rich_editing','true'),
(67,4,'syntax_highlighting','true'),
(68,4,'comment_shortcuts','false'),
(69,4,'admin_color','modern'),
(70,4,'use_ssl','0'),
(71,4,'show_admin_bar_front','true'),
(72,4,'locale',''),
(73,4,'wp_capabilities','a:1:{s:13:\"administrator\";b:1;}'),
(74,4,'wp_user_level','10'),
(75,4,'dismissed_wp_pointers',''),
(76,5,'nickname','Una Nieh'),
(77,5,'first_name','Una'),
(78,5,'last_name','Nieh'),
(79,5,'description',''),
(80,5,'rich_editing','true'),
(81,5,'syntax_highlighting','true'),
(82,5,'comment_shortcuts','false'),
(83,5,'admin_color','modern'),
(84,5,'use_ssl','0'),
(85,5,'show_admin_bar_front','true'),
(86,5,'locale','zh_TW'),
(87,5,'wp_capabilities','a:1:{s:13:\"administrator\";b:1;}'),
(88,5,'wp_user_level','10'),
(89,5,'dismissed_wp_pointers',''),
(90,6,'nickname','Lynn Tong'),
(91,6,'first_name','Lynn'),
(92,6,'last_name','Tong'),
(93,6,'description',''),
(94,6,'rich_editing','true'),
(95,6,'syntax_highlighting','true'),
(96,6,'comment_shortcuts','false'),
(97,6,'admin_color','modern'),
(98,6,'use_ssl','0'),
(99,6,'show_admin_bar_front','true'),
(100,6,'locale',''),
(101,6,'wp_capabilities','a:1:{s:13:\"administrator\";b:1;}'),
(102,6,'wp_user_level','10'),
(103,6,'dismissed_wp_pointers',''),
(119,4,'session_tokens','a:9:{s:64:\"54abc6ca6652a27899bc30ba4232536e49c63dcf776ab99e0a3da776d4a3514a\";a:4:{s:10:\"expiration\";i:1780054492;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:111:\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779881692;}s:64:\"ebc7d6e965135138e8937dcf1a4f3652eb80fc0b2b6212d1247ce59a80319cb5\";a:4:{s:10:\"expiration\";i:1780102536;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:111:\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779929736;}s:64:\"674fec7a954a50028e2bf835a1227bce55974ace3d91b49f3315f345a6b36b95\";a:4:{s:10:\"expiration\";i:1780111426;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36\";s:5:\"login\";i:1779938626;}s:64:\"84cbc457e6955d982c837149bd1a1efeaec965bb0b35a1233ad8894d5ab85968\";a:4:{s:10:\"expiration\";i:1780135768;s:2:\"ip\";s:14:\"59.124.167.225\";s:2:\"ua\";s:84:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:109.0) Gecko/20100101 Firefox/115.0\";s:5:\"login\";i:1779962968;}s:64:\"d9c47a62d9e62fb27ae1a470ce70b439d1cf4d97ef55c465421e550e99c8a82f\";a:4:{s:10:\"expiration\";i:1780144734;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:111:\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779971934;}s:64:\"123c4d6403967979920c5d4e1e81cea971edbcd17f32bf3d2412a67cd22ca0f6\";a:4:{s:10:\"expiration\";i:1780150504;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:111:\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779977704;}s:64:\"25bdb0b9f4e82489a1241a0bf19d1773dae4d3269ec9ae258b00263bf55851ad\";a:4:{s:10:\"expiration\";i:1780186662;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:111:\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780013862;}s:64:\"39f57e85cce04f90d4a929669ad781d4f272b7c4ac0bc6e4e89c570774428995\";a:4:{s:10:\"expiration\";i:1780201301;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36\";s:5:\"login\";i:1780028501;}s:64:\"e21e287c69dda310c95264729af90c83048678d9740e587f2e350040abfe12a0\";a:4:{s:10:\"expiration\";i:1780201432;s:2:\"ip\";s:15:\"123.110.137.240\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36\";s:5:\"login\";i:1780028632;}}'),
(120,4,'wp_dashboard_quick_press_last_post_id','1760'),
(121,4,'community-events-location','a:1:{s:2:\"ip\";s:13:\"123.110.137.0\";}'),
(124,6,'wp_dashboard_quick_press_last_post_id','148'),
(125,6,'community-events-location','a:1:{s:2:\"ip\";s:13:\"120.235.178.0\";}'),
(126,6,'wp_persisted_preferences','a:4:{s:4:\"core\";a:3:{s:26:\"isComplementaryAreaVisible\";b:0;s:24:\"enableChoosePatternModal\";b:1;s:14:\"renderingModes\";a:1:{s:16:\"twentytwentyfive\";a:1:{s:4:\"page\";s:15:\"template-locked\";}}}s:14:\"core/edit-post\";a:2:{s:12:\"welcomeGuide\";b:0;s:20:\"welcomeGuideTemplate\";b:0;}s:9:\"_modified\";s:24:\"2026-05-27T08:32:00.794Z\";s:14:\"core/edit-site\";a:1:{s:12:\"welcomeGuide\";b:0;}}'),
(127,5,'wp_dashboard_quick_press_last_post_id','1307'),
(128,5,'community-events-location','a:1:{s:2:\"ip\";s:12:\"119.14.102.0\";}'),
(129,5,'wp_persisted_preferences','a:4:{s:4:\"core\";a:1:{s:26:\"isComplementaryAreaVisible\";b:1;}s:14:\"core/edit-post\";a:1:{s:12:\"welcomeGuide\";b:0;}s:9:\"_modified\";s:24:\"2026-05-22T07:18:43.567Z\";s:14:\"core/edit-site\";a:2:{s:12:\"welcomeGuide\";b:0;s:16:\"welcomeGuidePage\";b:0;}}'),
(130,1,'wp_user-settings','libraryContent=browse'),
(131,1,'wp_user-settings-time','1770269911'),
(132,4,'wp_persisted_preferences','a:3:{s:4:\"core\";a:3:{s:26:\"isComplementaryAreaVisible\";b:1;s:24:\"enableChoosePatternModal\";b:1;s:14:\"renderingModes\";a:1:{s:16:\"twentytwentyfive\";a:1:{s:4:\"page\";s:15:\"template-locked\";}}}s:14:\"core/edit-post\";a:2:{s:12:\"welcomeGuide\";b:0;s:20:\"welcomeGuideTemplate\";b:0;}s:9:\"_modified\";s:24:\"2026-05-07T07:36:07.289Z\";}'),
(150,6,'session_tokens','a:23:{s:64:\"7c38534ccc3751e86b5f3f95d3eb23f71df461bfa798a34f83a5e6be277f584a\";a:4:{s:10:\"expiration\";i:1780051495;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779878695;}s:64:\"69f194e50d663511a2992fb3375822f66e8fcf3dbebe411fd38444749963cb05\";a:4:{s:10:\"expiration\";i:1780051767;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779878967;}s:64:\"cc675b6a4b49772e3a32a4a2eb144e38aef20f9c4a3e79e3aa836d38d4c8fd29\";a:4:{s:10:\"expiration\";i:1780052157;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779879357;}s:64:\"3bf6b3563ee4d7f8c3706c00c3f06015bb581239e760d45e9b11c34dc9844547\";a:4:{s:10:\"expiration\";i:1780056779;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779883979;}s:64:\"b29463cba21662c521ba72fe321b2635c796cbf1e29dfb073b78736754f97ae0\";a:4:{s:10:\"expiration\";i:1780061463;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779888663;}s:64:\"d91fa8876046d7684689594abb4f1f1594e7c0b604f4d99eca910ccdbcc8c0e1\";a:4:{s:10:\"expiration\";i:1780065194;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779892394;}s:64:\"60dab25696ad50cc7726276ff0b13bd9f12aca70849e34f04fad92997516762e\";a:4:{s:10:\"expiration\";i:1780068632;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779895832;}s:64:\"9b6dd2daab402003503f5f1911d3435313f4c473738fab0fbd845d6d8443a8c9\";a:4:{s:10:\"expiration\";i:1780069019;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779896219;}s:64:\"15fbaaec18e7db1f88515cfde1b40ca85ba0c6ca8a7f31b9c4785de407aaa157\";a:4:{s:10:\"expiration\";i:1780069290;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:121:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36\";s:5:\"login\";i:1779896490;}s:64:\"aec93cbdb10511c922fb3624950cb82f37f5d199efaa4243328edf9a3b7a3067\";a:4:{s:10:\"expiration\";i:1780069408;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779896608;}s:64:\"bd0d8f85426e7456616ef7c62f359e2ba464059615acc68db0c16446e0de84d6\";a:4:{s:10:\"expiration\";i:1780101200;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779928400;}s:64:\"ecd0eb40975a817166978119939a091f55cd3b08825b94f0dbdf259fb885c474\";a:4:{s:10:\"expiration\";i:1780102043;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779929243;}s:64:\"20b2adf67759df7331453a7df0c621f5db9ab059c7cb20c11de3ffcb35f853ce\";a:4:{s:10:\"expiration\";i:1780105556;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779932756;}s:64:\"764667879145006ec9024fefef650ef4491f230d23c2cda64e993bc26a0e340c\";a:4:{s:10:\"expiration\";i:1780107215;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779934415;}s:64:\"410c46b9eaf59222d163b6e0c8d0e7dc6103c3763f6752d1355148b715a59e23\";a:4:{s:10:\"expiration\";i:1780135833;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779963033;}s:64:\"627d74e59584a457011d0e7d8e2b7d7881d6c3db5ac508e0e80530d3675fee59\";a:4:{s:10:\"expiration\";i:1780135928;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779963128;}s:64:\"3be1810e4e3f3332f6d8e9885f190f50bd23bec763690d631bc513e2e91a6797\";a:4:{s:10:\"expiration\";i:1780137039;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779964239;}s:64:\"a3608e171307a41da56a88a51a30bcdaadc24ec629e98e611285af685674c690\";a:4:{s:10:\"expiration\";i:1780144701;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1779971901;}s:64:\"f70f4f3c2e7f162f27d871c2ee459c849fe0c1a3f8c44b3c7c083b75fc5ad44b\";a:4:{s:10:\"expiration\";i:1780192688;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780019888;}s:64:\"e5a050dbb9555b64dcc8773b7c51c49a314480c9435b9cf934b10a3a6e3ce0d1\";a:4:{s:10:\"expiration\";i:1780203584;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780030784;}s:64:\"0a2faadcdec37bde5e921193b3a0f13a8d10d4c5c6dc4b5abdf4e4890a2f1eb5\";a:4:{s:10:\"expiration\";i:1780210705;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15\";s:5:\"login\";i:1780037905;}s:64:\"ce29b698d2ad6b09b2ca89772a630e1c0c23ff6e7e1fde8260bf50fab7eb75fe\";a:4:{s:10:\"expiration\";i:1780215422;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780042622;}s:64:\"ea27f8d516bcc211bd393a19991592c672175c972991da514d8b84ad58980b9c\";a:4:{s:10:\"expiration\";i:1780223311;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780050511;}}'),
(180,6,'_ms_switch_store','a:9:{s:36:\"ddada0c0-d87f-4e81-a254-e600b27ef9d4\";a:4:{s:8:\"selector\";s:12:\"lN5pC7RkagCP\";s:4:\"hash\";s:63:\"$wp$2y$12$vNyH83fHX34Yc2MmHI1sKOce/6XjXqLmugpoXvg03prw0HMsiYptu\";s:7:\"expires\";i:1780137109;s:6:\"issued\";i:1780050709;}s:36:\"a5c40406-fc52-46d5-9c3c-2bcde4dddac8\";a:4:{s:8:\"selector\";s:12:\"D0eVchVIxY18\";s:4:\"hash\";s:63:\"$wp$2y$12$bNhqfoav43QWOzja0Jp7y.B1LqYDRf7X1Dk1VXoCGdPTeSZExnH6e\";s:7:\"expires\";i:1780052009;s:6:\"issued\";i:1779965609;}s:36:\"b7555763-92cf-4ac9-8549-aae22315bc01\";a:4:{s:8:\"selector\";s:12:\"H0OHoV0L1yoR\";s:4:\"hash\";s:63:\"$wp$2y$12$Dm8zZIHan0e7bBJ5AaRO8OMESkj3E/u6pTi93FlycF5a1iNBqPe1K\";s:7:\"expires\";i:1780058304;s:6:\"issued\";i:1779971904;}s:36:\"91f42ebb-2105-43c0-86f2-837fb07f65b6\";a:4:{s:8:\"selector\";s:12:\"Idut3TQCH4Yx\";s:4:\"hash\";s:63:\"$wp$2y$12$/9iXVVnDDc9HyU/MUPfEgOHY4wO8fEVck/f2tZyHt6agCQtcZoCN6\";s:7:\"expires\";i:1780111073;s:6:\"issued\";i:1780024674;}s:36:\"3ed8cca2-e12a-412f-a82c-5acce342e8ae\";a:4:{s:8:\"selector\";s:12:\"0sCsJQHnBgWG\";s:4:\"hash\";s:63:\"$wp$2y$12$wtaWHjQXyK4rsvWmRRVqp.JGZ6cyFrTv0eekO5ebqEFZPeEOSqpZe\";s:7:\"expires\";i:1780122606;s:6:\"issued\";i:1780036206;}s:36:\"4f660ee5-d1f8-48b6-ae3a-400c2cb53104\";a:4:{s:8:\"selector\";s:12:\"ruYEMIvrLa23\";s:4:\"hash\";s:63:\"$wp$2y$12$/od6O9FF7G0siF4PUsgDv.noxTjaN8NErY7.vL./BUqV8nSqLXu2q\";s:7:\"expires\";i:1780123252;s:6:\"issued\";i:1780036852;}s:36:\"3c1c8395-b324-4fbc-8d34-6d8cf1c70db5\";a:4:{s:8:\"selector\";s:12:\"JBjTep63GEnp\";s:4:\"hash\";s:63:\"$wp$2y$12$LEmKNbZjsl/3ibsu1XZnHeBILUMtan3EnIe1Vc0xfguU4TWeOSXSG\";s:7:\"expires\";i:1780127906;s:6:\"issued\";i:1780041506;}s:36:\"e59598eb-7207-4f6c-a7bf-40871d2d8b7d\";a:4:{s:8:\"selector\";s:12:\"a4m90af35bEP\";s:4:\"hash\";s:63:\"$wp$2y$12$pe.oWlYFq9XieACQxHRKYuPzL0YqoBiw722okqup2w24sByW/aS2K\";s:7:\"expires\";i:1780135419;s:6:\"issued\";i:1780049019;}s:36:\"fba52d81-b604-4136-8d52-32b318fe5195\";a:4:{s:8:\"selector\";s:12:\"WjgJYhZPypOq\";s:4:\"hash\";s:63:\"$wp$2y$12$XYgqlO9AhlC1oY9WbPn9a.VaMGugKQciwzKYAxuCNt5uBuBfasnPe\";s:7:\"expires\";i:1780137095;s:6:\"issued\";i:1780050695;}}'),
(183,1,'_ms_switch_store','a:1:{s:36:\"c3abba16-920d-405c-990c-1c04d927fce9\";a:4:{s:8:\"selector\";s:12:\"HxEHmn3G68ja\";s:4:\"hash\";s:63:\"$wp$2y$12$d3AGC0ePFbBN4bAvsCb2OuV/9vyaZhRW2NqEtAzQfKqoOzdFUT2c6\";s:7:\"expires\";i:1780139234;s:6:\"issued\";i:1780052834;}}'),
(184,4,'_ms_switch_store','a:3:{s:36:\"4aaa2d59-139b-4cd2-b3b1-52f104644ccd\";a:4:{s:8:\"selector\";s:12:\"pmiNx7fBSAm5\";s:4:\"hash\";s:63:\"$wp$2y$12$3h39EWssL/JiRO3Vf7DuNe9m.VvJhev0tWqr26FvvKCY4P8QYr4yy\";s:7:\"expires\";i:1780138207;s:6:\"issued\";i:1780051807;}s:36:\"bf86cd19-3d38-4303-b693-77de4f89d6e9\";a:4:{s:8:\"selector\";s:12:\"wKR51KwxdPoB\";s:4:\"hash\";s:63:\"$wp$2y$12$zQ1hzyy7/g.9weoNFduxa.toErMCGoVXd8lXwRZqHoZOOj1iLaip2\";s:7:\"expires\";i:1780136781;s:6:\"issued\";i:1780050381;}s:36:\"854d2e36-d0ca-4add-b0e8-68748ee0b6b4\";a:4:{s:8:\"selector\";s:12:\"B1iNykugq8LX\";s:4:\"hash\";s:63:\"$wp$2y$12$M2CFm1gXS5LFhPp6dHV38.pkE85r/A2uQSFh7n7Blvd0KNWn6Ebgy\";s:7:\"expires\";i:1780064105;s:6:\"issued\";i:1779977705;}}'),
(185,5,'_ms_switch_store','a:1:{s:36:\"73453f5c-8500-48f0-b9c5-8ae995f48593\";a:4:{s:8:\"selector\";s:12:\"bxc6KzAWSzaW\";s:4:\"hash\";s:63:\"$wp$2y$12$Bmb5.OLZOc0lunpf/ZWZMuz2Q0VnyTg7.vJL68hRlmbWCTks6swae\";s:7:\"expires\";i:1780139381;s:6:\"issued\";i:1780052981;}}'),
(187,10,'nickname','Demo'),
(188,10,'first_name','Demo'),
(189,10,'last_name',''),
(190,10,'description',''),
(191,10,'rich_editing','true'),
(192,10,'syntax_highlighting','true'),
(193,10,'comment_shortcuts','false'),
(194,10,'admin_color','modern'),
(195,10,'use_ssl','0'),
(196,10,'show_admin_bar_front','true'),
(197,10,'locale',''),
(198,10,'wp_capabilities','a:1:{s:10:\"subscriber\";b:1;}'),
(199,10,'wp_user_level','0'),
(200,10,'dismissed_wp_pointers',''),
(202,10,'_ms_switch_store','a:2:{s:36:\"c45b37d8-4464-492a-8d30-3b1ffa114454\";a:4:{s:8:\"selector\";s:12:\"VYIOViTPP4nA\";s:4:\"hash\";s:63:\"$wp$2y$12$UJCf1HM6Qq5Z27/Q9Ml9BON10uW3yAVJHlaim39E.HyY.Nk6e6lLa\";s:7:\"expires\";i:1780088267;s:6:\"issued\";i:1780001867;}s:36:\"d04db975-2cbf-46a5-81bd-bc7b0d3ac039\";a:4:{s:8:\"selector\";s:12:\"3vQyj78y9SiV\";s:4:\"hash\";s:63:\"$wp$2y$12$UJd5T33Xr3TbYgLWL0ORmOpj0z0u.Z.WvoWwSK3jSIwaY6tZGC8d.\";s:7:\"expires\";i:1780131663;s:6:\"issued\";i:1780045263;}}'),
(203,11,'nickname','Sales'),
(204,11,'first_name',''),
(205,11,'last_name',''),
(206,11,'description',''),
(207,11,'rich_editing','true'),
(208,11,'syntax_highlighting','true'),
(209,11,'comment_shortcuts','false'),
(210,11,'admin_color','modern'),
(211,11,'use_ssl','0'),
(212,11,'show_admin_bar_front','true'),
(213,11,'locale',''),
(214,11,'wp_capabilities','a:1:{s:10:\"subscriber\";b:1;}'),
(215,11,'wp_user_level','0'),
(216,11,'dismissed_wp_pointers',''),
(217,11,'session_tokens','a:1:{s:64:\"66bd8ce384cde78e4bb74f31482cca5e927d66323a277efc19218509baabb682\";a:4:{s:10:\"expiration\";i:1780209876;s:2:\"ip\";s:14:\"38.147.105.173\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36\";s:5:\"login\";i:1780037076;}}'),
(218,11,'_ms_switch_store','a:2:{s:36:\"4f660ee5-d1f8-48b6-ae3a-400c2cb53104\";a:4:{s:8:\"selector\";s:12:\"iLJtbvrWDRcg\";s:4:\"hash\";s:63:\"$wp$2y$12$3.7Ye8wUEI0D3GzIf/cIY.7RNu4pMeBvn4B4X3xnZuxo4/5OLR3lu\";s:7:\"expires\";i:1780128986;s:6:\"issued\";i:1780042586;}s:36:\"3c1c8395-b324-4fbc-8d34-6d8cf1c70db5\";a:4:{s:8:\"selector\";s:12:\"fmm5Z2YQjBy2\";s:4:\"hash\";s:63:\"$wp$2y$12$WhIrJO8E1tXsMGWTleILU.pk8MV/BH1sOZgiweBmxi6CXtfATuSpa\";s:7:\"expires\";i:1780124245;s:6:\"issued\";i:1780037846;}}'),
(220,10,'community-events-location','a:1:{s:2:\"ip\";s:12:\"111.243.23.0\";}'),
(223,5,'wp_user-settings','editor=tinymce'),
(224,5,'wp_user-settings-time','1776658383'),
(225,5,'wpforms_overview_table_columns','a:6:{i:1;s:4:\"name\";i:2;s:4:\"tags\";i:3;s:6:\"author\";i:4;s:9:\"shortcode\";i:5;s:7:\"created\";i:6;s:9:\"locations\";}'),
(226,1,'wpforms_overview_table_columns','a:6:{i:1;s:4:\"name\";i:2;s:4:\"tags\";i:3;s:6:\"author\";i:4;s:9:\"shortcode\";i:5;s:7:\"created\";i:6;s:9:\"locations\";}'),
(227,1,'wpforms_dismissed','a:1:{s:20:\"edu-admin-notice-bar\";i:1777361207;}'),
(252,4,'wpforms_overview_table_columns','a:6:{i:1;s:4:\"name\";i:2;s:4:\"tags\";i:3;s:6:\"author\";i:4;s:9:\"shortcode\";i:5;s:7:\"created\";i:6;s:9:\"locations\";}'),
(280,5,'session_tokens','a:1:{s:64:\"637fb0ec0040effa92c155f2eedbd3223e351386b4a836b1f83a6cfad9829bd8\";a:4:{s:10:\"expiration\";i:1780225074;s:2:\"ip\";s:14:\"119.14.103.226\";s:2:\"ua\";s:117:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36\";s:5:\"login\";i:1780052274;}}'),
(283,6,'ignore_code_snippets_survey_message','survey'),
(284,10,'session_tokens','a:2:{s:64:\"1bc182dbe65def6e22f6dd665761800f5bee23bf040a9c2058b55a6a165a1d0d\";a:4:{s:10:\"expiration\";i:1780174667;s:2:\"ip\";s:13:\"118.166.84.79\";s:2:\"ua\";s:84:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:151.0) Gecko/20100101 Firefox/151.0\";s:5:\"login\";i:1780001867;}s:64:\"1b477dcc71ebcc2f419179ee34ca7f844b4c99b388af31c36b79d42625b7dc99\";a:4:{s:10:\"expiration\";i:1780217853;s:2:\"ip\";s:14:\"150.117.236.31\";s:2:\"ua\";s:84:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:151.0) Gecko/20100101 Firefox/151.0\";s:5:\"login\";i:1780045053;}}'),
(285,1,'session_tokens','a:1:{s:64:\"83e7cef55401e5e9f4e55a262a817cbd776ad8c9819f7b9512d0361f64eabeb9\";a:4:{s:10:\"expiration\";i:1780221813;s:2:\"ip\";s:13:\"114.24.161.86\";s:2:\"ua\";s:131:\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0\";s:5:\"login\";i:1780049013;}}');
/*!40000 ALTER TABLE `wp_usermeta` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_users`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_users` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `user_login` varchar(60) NOT NULL DEFAULT '',
  `user_pass` varchar(255) NOT NULL DEFAULT '',
  `user_nicename` varchar(50) NOT NULL DEFAULT '',
  `user_email` varchar(100) NOT NULL DEFAULT '',
  `user_url` varchar(100) NOT NULL DEFAULT '',
  `user_registered` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  `user_activation_key` varchar(255) NOT NULL DEFAULT '',
  `user_status` int(11) NOT NULL DEFAULT 0,
  `display_name` varchar(250) NOT NULL DEFAULT '',
  PRIMARY KEY (`ID`),
  KEY `user_login_key` (`user_login`),
  KEY `user_nicename` (`user_nicename`),
  KEY `user_email` (`user_email`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_users` WRITE;
/*!40000 ALTER TABLE `wp_users` DISABLE KEYS */;
INSERT INTO `wp_users` VALUES
(1,'wp_user','$wp$2y$12$3fq/0KHhqOQxb/RDqdJFAu3fvvVXiP1QPRTvlFi9YOrxvZIGiQnYi','wp_user','marketing@accusys.com.tw','https://wp.momentry.ddns.net','2026-01-13 04:14:49','',0,'wp_user'),
(4,'Wendy Wen','$wp$2y$12$w2MS0TxwWjyJu9d3jSnE9uYbLTb1a2s7SP2LBAQFvjZ/QtRMQY3sK','wendy-wen','wendy@accusys.com.tw','','2026-02-02 10:14:26','',0,'Wendy Wen'),
(5,'Una Nieh','$wp$2y$12$ps3SJJ3qJLiVi2XPSuVdmuaTo.B16xs.pvR13rOr2LbQr460nzrWW','una-nieh','una@accusys.com.tw','','2026-02-02 10:18:09','',0,'Una Nieh'),
(6,'Lynn Tong','$wp$2y$12$ZGVFl7h96p014gOXHhbOh.//DNmfJLRkwL1pFF12HQNpMoW3LUi66','lynn-tong','lynn.tong@accusys.com.tw','','2026-02-02 10:19:15','',0,'Lynn Tong'),
(10,'Demo','$wp$2y$12$Tqb7HYOYvHvxu.9GI2tgauj4dPA36bwD177AB.V.3KXg/JcAu3mb6','demo','support@accusys.com.tw','','2026-03-26 01:13:30','',0,'Demo'),
(11,'Sales','$wp$2y$12$.1ro5RzFibkKad15yOb.5.9bv2Yz2c6qlcsh79MhO8zvDREbL/l/S','sales','sales@accusys.com.tw','','2026-03-29 08:54:03','',0,'Sales');
/*!40000 ALTER TABLE `wp_users` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpforms_logs`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpforms_logs` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `message` longtext NOT NULL,
  `types` varchar(255) NOT NULL,
  `create_at` datetime NOT NULL,
  `form_id` bigint(20) DEFAULT NULL,
  `entry_id` bigint(20) DEFAULT NULL,
  `user_id` bigint(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpforms_logs` WRITE;
/*!40000 ALTER TABLE `wp_wpforms_logs` DISABLE KEYS */;
INSERT INTO `wp_wpforms_logs` VALUES
(1,'Migration','Migration of WPForms to 1.10.0.5 is fully completed.','log','2026-05-22 06:55:31',0,0,1);
/*!40000 ALTER TABLE `wp_wpforms_logs` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpforms_payment_meta`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpforms_payment_meta` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `payment_id` bigint(20) NOT NULL,
  `meta_key` varchar(255) DEFAULT NULL,
  `meta_value` longtext DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `payment_id` (`payment_id`),
  KEY `meta_key` (`meta_key`(191)),
  KEY `meta_value` (`meta_value`(191))
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpforms_payment_meta` WRITE;
/*!40000 ALTER TABLE `wp_wpforms_payment_meta` DISABLE KEYS */;
/*!40000 ALTER TABLE `wp_wpforms_payment_meta` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpforms_payments`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpforms_payments` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `form_id` bigint(20) NOT NULL,
  `status` varchar(10) NOT NULL DEFAULT '',
  `subtotal_amount` decimal(26,8) NOT NULL DEFAULT 0.00000000,
  `discount_amount` decimal(26,8) NOT NULL DEFAULT 0.00000000,
  `total_amount` decimal(26,8) NOT NULL DEFAULT 0.00000000,
  `currency` varchar(3) NOT NULL DEFAULT '',
  `entry_id` bigint(20) NOT NULL DEFAULT 0,
  `gateway` varchar(20) NOT NULL DEFAULT '',
  `type` varchar(12) NOT NULL DEFAULT '',
  `mode` varchar(4) NOT NULL DEFAULT '',
  `transaction_id` varchar(40) NOT NULL DEFAULT '',
  `customer_id` varchar(40) NOT NULL DEFAULT '',
  `subscription_id` varchar(40) NOT NULL DEFAULT '',
  `subscription_status` varchar(10) NOT NULL DEFAULT '',
  `title` varchar(255) NOT NULL DEFAULT '',
  `date_created_gmt` datetime NOT NULL,
  `date_updated_gmt` datetime NOT NULL,
  `is_published` tinyint(1) NOT NULL DEFAULT 1,
  PRIMARY KEY (`id`),
  KEY `form_id` (`form_id`),
  KEY `status` (`status`(8)),
  KEY `total_amount` (`total_amount`),
  KEY `type` (`type`(8)),
  KEY `transaction_id` (`transaction_id`(32)),
  KEY `customer_id` (`customer_id`(32)),
  KEY `subscription_id` (`subscription_id`(32)),
  KEY `subscription_status` (`subscription_status`(8)),
  KEY `title` (`title`(64))
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpforms_payments` WRITE;
/*!40000 ALTER TABLE `wp_wpforms_payments` DISABLE KEYS */;
/*!40000 ALTER TABLE `wp_wpforms_payments` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpforms_tasks_meta`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpforms_tasks_meta` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `action` varchar(255) NOT NULL,
  `data` longtext NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpforms_tasks_meta` WRITE;
/*!40000 ALTER TABLE `wp_wpforms_tasks_meta` DISABLE KEYS */;
INSERT INTO `wp_wpforms_tasks_meta` VALUES
(1,'wpforms_process_forms_locator_scan','W10=','2026-04-23 09:53:42'),
(2,'wpforms_process_purge_spam','W10=','2026-04-23 09:53:42'),
(4,'wpforms_admin_addons_cache_update','W10=','2026-04-23 10:25:00'),
(9,'wpforms_admin_builder_templates_cache_update','W10=','2026-04-28 07:26:47'),
(30,'wpforms_builder_help_cache_update','W10=','2026-05-21 03:36:11');
/*!40000 ALTER TABLE `wp_wpforms_tasks_meta` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpmailsmtp_debug_events`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpmailsmtp_debug_events` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `content` text DEFAULT NULL,
  `initiator` text DEFAULT NULL,
  `event_type` tinyint(3) unsigned NOT NULL DEFAULT 0,
  `created_at` timestamp NOT NULL DEFAULT current_timestamp(),
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpmailsmtp_debug_events` WRITE;
/*!40000 ALTER TABLE `wp_wpmailsmtp_debug_events` DISABLE KEYS */;
INSERT INTO `wp_wpmailsmtp_debug_events` VALUES
(1,'Mailer: 其他 SMTP\r\nSMTP Error: Could not authenticate. SMTP server error: QUIT command failed','{\"file\":\"\\/Users\\/accusys\\/wordpress\\/web\\/wp-content\\/plugins\\/wp-mail-smtp\\/src\\/Admin\\/SetupWizard.php\",\"line\":1217}',0,'2026-04-23 01:54:27'),
(2,'Mailer: 其他 SMTP\r\nSMTP Error: Could not authenticate. SMTP server error: QUIT command failed','{\"file\":\"\\/Users\\/accusys\\/wordpress\\/web\\/wp-content\\/plugins\\/wp-mail-smtp\\/src\\/Admin\\/Pages\\/TestTab.php\",\"line\":348}',0,'2026-04-23 01:54:45');
/*!40000 ALTER TABLE `wp_wpmailsmtp_debug_events` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
DROP TABLE IF EXISTS `wp_wpmailsmtp_tasks_meta`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8mb4 */;
CREATE TABLE `wp_wpmailsmtp_tasks_meta` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `action` varchar(255) NOT NULL,
  `data` longtext NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_520_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

SET @OLD_AUTOCOMMIT=@@AUTOCOMMIT, @@AUTOCOMMIT=0;
LOCK TABLES `wp_wpmailsmtp_tasks_meta` WRITE;
/*!40000 ALTER TABLE `wp_wpmailsmtp_tasks_meta` DISABLE KEYS */;
/*!40000 ALTER TABLE `wp_wpmailsmtp_tasks_meta` ENABLE KEYS */;
UNLOCK TABLES;
COMMIT;
SET AUTOCOMMIT=@OLD_AUTOCOMMIT;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*M!100616 SET NOTE_VERBOSITY=@OLD_NOTE_VERBOSITY */;